Table with width

src/components/Equipment.vue

@@ -2,7 +2,7 @@
 	<div id="equipment">
 			<div class="section">
 				<div class="content row">
-					<div id="mini_menu" class="row col-sm-12 col-md-12 col-lg-9 col-xl-9">
+					<div id="mini_menu" class="row col-sm-12 col-md-12 col-lg-9 col-xl-8">
 						<div class="block_menu col-sm-12 col-md-3 col-lg-3 col-xl-3" v-for="item, index in page.menu">
 							<div @click="menu(item.value, index)" :class="[(item.value == tab) ? 'active' : 'def']" class="name"><div class="text">{{item.name}}</div></div>
 							<transition name="block-menu-fade">
@@ -19,19 +19,19 @@
 					<p>{{page.Title}}</p>
 				</div>
         <div id="table_data" class="row">
-          <div id="table_data_content" class="col-sm-12 col-md-12 col-lg-9 col-xl-9">
+          <div id="table_data_content" class="col-sm-12 col-md-12 col-lg-9 col-xl-8">
             <div id="comp">
 				<table v-if="((tab == '')||(tab == 'OK'))&&(select_tab=='')">
 				<tbody>
 					<tr v-for="i in page.table">
-					<td>{{i.name}}</td>
+					<td><p>{{i.name}}</p></td>
 					<td><p>{{i.diam}}<br>{{i.diam_ed}}</p></td>
 					<td><p>{{i.grad}}<br>{{i.grad_ed}}</p></td>
 					<td><p>{{i.pronic}}<br>{{i.pronic_ed}}</p></td>
 					</tr>
 				</tbody>
 				</table>
-				<component v-bind:is="select_tab" class="tab"></component>
+				<component :is="select_tab" class="tab"></component>
 			</div>
           </div>
         </div>
@@ -247,6 +247,7 @@ export default {
 		},
 		menu: function(index, id){
 			// alert(index);
+			// if((this.tab == index)&&(this.select_tab != '')){
 			if(this.tab == index){
 				this.tab = ''
 				this.marg_name = 0;
@@ -287,9 +288,7 @@ export default {
 }
 #equipment #mini_menu{
 	margin: 0 auto;
-	margin-top: 12%;
-}
-#equipment #mini_menu{
+	margin-top: 10%;
 	color: red;
 	z-index: 100;
 }
@@ -305,10 +304,9 @@ export default {
 	min-height: 5em;
 	border: 1px none solid;
 	transition: all .2s ease;
-
 }
 #equipment #mini_menu .block_menu div.name.active{
-	color: rgb(0, 146, 202);
+	color: rgb(0, 102, 143);
 	background-color: rgba(218, 218, 218, 0.808);
 }
 #equipment #mini_menu .block_menu div.name.def{
@@ -336,7 +334,6 @@ export default {
 	padding: 0.4em;
 	border: 1px black solid;
 	transition: all .4s ease;
-
 }
 #equipment #mini_menu .list_menu.active_mini_tab{
 	color: rgb(0, 86, 119);
@@ -367,13 +364,36 @@ export default {
   margin: 0 auto;
 }
 #equipment #table_data table{
-  /* width: 100%; */
+  width: 100%;
   margin: 0 auto;
 }
 #equipment #table_data td{
-  border: 1px black solid;
-  background-color: aqua;
+	border: 1px black solid;
+	background-color: rgba(2, 55, 76, 0.72);
+
+	/* vertical-align: middle; */
+	/* max-width: 30px; */
 }
+#equipment #table_data tr td{
+	width: 25%;
+	padding: .6rem;
+	margin: 0 auto;
+	font-weight: 600;
+	color: white;
+}
+#equipment #table_data td p{
+	margin: 0 auto;
+	width: 60%;
+}
+#equipment #table_data tr td:first-child{
+	/* width: 30%; */
+	width: 14%;
+}
+#equipment #table_data td:first-child p{
+	width: 100%;
+}
+
+
 
 
 #equipment #footer_equipment{