new table

src/App.vue

@@ -24,6 +24,8 @@ import MdMenu from "vue-material/dist/components/MdMenu";
 import MdList from "vue-material/dist/components/MdList";
 import MdField from "vue-material/dist/components/MdField";
 import MdSteppers from "vue-material/dist/components/MdSteppers";
+import MdTable from "vue-material/dist/components/MdTable";
+import MdContent from "vue-material/dist/components/MdContent";
 
 Vue.use(MdTabs);
 Vue.use(MdIcon);
@@ -37,6 +39,8 @@ Vue.use(MdMenu);
 Vue.use(MdList);
 Vue.use(MdField);
 Vue.use(MdSteppers);
+Vue.use(MdTable);
+Vue.use(MdContent);
 
 import TabsMenu from "@/components/TabsMenu.vue";
 import LoaderPage from "@/components/Others/Loader/LoaderPage.vue";

src/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue

@@ -1,10 +1,10 @@
 <template>
-  <tr v-on:click="openPEI()" class="clickable">
+  <md-table-row v-on:click="openPEI()" class="clickable">
-    <td class="player-border-top server-table-padding" style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213;">{{player['name']}}</td>
+    <md-table-cell md-label="Очки">{{ player['score'] }}</md-table-cell>
-    <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['score']}}</td>
+    <md-table-cell md-label="Никнейм">{{ player['name'] }}</md-table-cell>
-    <td class="player-border-top server-table-padding" style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213">{{player['duration']}}</td>
+    <md-table-cell md-label="Время">{{ player['duration'] }}</md-table-cell>
     <PlayerExtendedInfo ref="pei" :player="player"/>
-  </tr>
+  </md-table-row>
 </template>
 
 <script>

src/components/TabsMenuElements/ServersView/Components/ServerFullInfo.vue

@@ -39,18 +39,14 @@
           <div>
             <h3 style="text-align: center" class="sfi-current-player">Сейчас играет {{serverData['player_count']}}/{{serverData['max_players']}}</h3>
             <hr width="30%">
-            <table v-if="serverData['players'].length > 0" style="margin-left: auto; margin-right: auto; height: 20em; padding-left: 10%; padding-right: 10%; padding-bottom: 5%">
+            <md-table md-height="10">
-              <thead>
+              <md-table-row>
-                <tr>
+                <md-table-head>Очки</md-table-head>
-                  <th style="text-align: left; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Имя</th>
+                <md-table-head>Никнейм</md-table-head>
-                  <th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Очки</th>
+                <md-table-head>Наиграно</md-table-head>
-                  <th style="text-align: center; font-family: tf2secondary; font-size: 2em; color: #131213" class="server-table-padding">Время игры</th>
+              </md-table-row>
-                </tr>
+              <PlayerTableInfo v-for="player in serverData['players']" :key="player['steam']['steam2']" :player="player"/>
-              </thead>
+            </md-table>
-              <tbody>
-              <PlayerTableInfo v-for="player_data in serverData['players']" :key="player_data['name']" :player="player_data"/>
-              </tbody>
-            </table>
           </div>
         </div>
       </div>
@@ -59,18 +55,19 @@
 </template>
 
 <script>
-import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue";
 import SteamSvg from "@/components/Others/CustomSvg/SteamSvg.vue";
 import TerminalSvg from "@/components/Others/CustomSvg/TerminalSvg.vue";
+import PlayerTableInfo from "@/components/TabsMenuElements/ServersView/Components/PlayerTableInfo.vue";
 
 export default {
   name: "ServerFullInfo",
-  components: {TerminalSvg, SteamSvg, PlayerTableInfo},
+  components: {PlayerTableInfo, TerminalSvg, SteamSvg},
   props: {
     serverData: Object,
   },
   data: () => ({
-    showServerDialog: false
+    showServerDialog: false,
+    expandPlayers: false
   }),
   methods: {
     openFIF() {
@@ -115,34 +112,6 @@ export default {
   padding: 2% 0%;
 }
 
-table {
-  display: flex;
-  flex-flow: column;
-  height: 100%;
-  width: 100%;
-}
-
-table thead {
-  /* head takes the height it requires,
-  and it's not scaled when table is resized */
-  flex: 0 0 auto;
-  width: calc(100% - 0.9em);
-}
-table tbody {
-  /* body takes all the remaining available space */
-  flex: 1 1 auto;
-  display: block;
-  overflow-y: scroll;
-}
-
-table tbody tr {
-  width: 100%;
-}
-table thead, table tbody tr {
-  display: table;
-  table-layout: fixed;
-}
-
 .server-info-rounded {
   border-radius: 20px;
   border: 5px solid black;