Таблица данных Bootstrap-разное количество ячеек строк одинаковой ширины

У меня есть таблица данных bootstrap (3.3.7), которую я хочу разместить одинаковой ширины на всех tds. В конце концов, я хотел бы, чтобы все строки с 3 ячейками доходили до правой стороны таблицы, сохраняя одинаковую ширину в каждой ячейке. Я провел массу исследований, чтобы найти что-то подобное, но потерпел неудачу, так что любая помощь в этом была бы очень признательна.



Следующий скриншот - это то, что у меня сейчас есть:
http://i.imgur.com/j033hYy.png



И вот что я хотел бы изменить в моей таблице кому:



Введите описание изображения здесь






.col-2 { width: 50%; }

.col-3 { width: 33.3%; }

.col-4 { width: 25%; }

.col-5 { width: 20%; }

.col-6 { width: 16.66666667%; }



table {

  margin-top: 50px;

}



thead tr th, td {

  text-align: center;

}



.td-parent {

  font-weight: bold;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">      

  <table class="table table-bordered table-striped">

    <thead>

      <tr>

        <th colspan="8">SPECIFICATION</th>

      </tr>

    </thead>

    <tbody>

      <tr>

        <td class="td-parent" colspan="2">Part Number</td>

        <td class="td-parent" colspan="2">Position</td>

        <td class="td-parent" colspan="2">Content</td>

      </tr>

      <tr>

        <td class="td-child" colspan="2">CDR1005</td>

        <td class="td-child" colspan="2">Front/Rear</td>

        <td class="td-child" colspan="2">4 identical pads</td>

      </tr>

      <tr>

        <td class="td-parent col-4" colspan="2">Meritor</td>

        <td class="td-parent col-4" colspan="2">Mercedes</td>

        <td class="td-parent col-4" colspan="2">Renault</td>

        <td class="td-parent col-4" colspan="2">WVA</td>

      </tr>

      <tr>

        <td class="td-child" colspan="2">TBA</td>

        <td class="td-child" colspan="2">TBA</td>

        <td class="td-child" colspan="2">TBA</td>

        <td class="td-child" colspan="2">TBA</td>

      </tr>

      <tr>

        <td class="td-parent" colspan="2">A</td>

        <td class="td-parent" colspan="2">B</td>

        <td class="td-parent" colspan="2">C</td>

      </tr>

      <tr>

        <td class="td-child" colspan="2">250</td>

        <td class="td-child" colspan="2">118</td>

        <td class="td-child" colspan="2">28</td>

      </tr>

    </tbody>

  </table>

</div>
635   4  

4 ответов:

1) Используйте colspan так, чтобы ячейки занимали всю строку

  • для 3 столбцов в строке используйте colspan = 4
  • для 4 столбцов в строке используйте colspan = 3
2) Используйте table-layout: fixed, чтобы получить равные ширины.

table-layout свойство определяет алгоритм, используемый для размещения таблиц. Если он не установлен, большинство браузеров по умолчанию установят его значение auto, где ширина зависит от содержимого. Поэтому вы не получаете равные ширины для ячеек. при установке этому свойству значения fixed, однако ширина столбца определяется шириной, а не содержанием .

table {
  margin-top: 50px;
  table-layout: fixed;
}

thead tr th, td {
  text-align: center;
  width: 1%;
}

.td-parent {
  font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">      
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th colspan="12">SPECIFICATION</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="td-parent" colspan="4">Part Number</td>
        <td class="td-parent" colspan="4">Position</td>
        <td class="td-parent" colspan="4">Content</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">CDR1005</td>
        <td class="td-child" colspan="4">Front/Rear</td>
        <td class="td-child" colspan="4">4 identical pads</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="3">Meritor</td>
        <td class="td-parent" colspan="3">Mercedes</td>
        <td class="td-parent" colspan="3">Renault</td>
        <td class="td-parent" colspan="3">WVA</td>
      </tr>
      <tr>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
        <td class="td-child" colspan="3">TBA</td>
      </tr>
      <tr>
        <td class="td-parent" colspan="4">A</td>
        <td class="td-parent" colspan="4">B</td>
        <td class="td-parent" colspan="4">C</td>
      </tr>
      <tr>
        <td class="td-child" colspan="4">250</td>
        <td class="td-child" colspan="4">118</td>
        <td class="td-child" colspan="4">28</td>
      </tr>
    </tbody>
  </table>
</div>
4  
2017-07-17 10:23:34

Управляющие столбцы с colspan 

.col-2 { width: 50%; }
.col-3 { width: 33.3%; }
.col-4 { width: 25%; }
.col-5 { width: 20%; }
.col-6 { width: 16.66666667%; }

table {
  margin-top: 50px;
}

thead tr th, td {
  text-align: center;
}

.td-parent {
  font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>




<div class="container">      
<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th colspan="12">SPECIFICATION</th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td width="33.3333%" class="td-parent" colspan="4">Part Number</td>
            <td width="33.3333%" class="td-parent" colspan="4">Position</td>
            <td width="33.3333%" class="td-parent" colspan="4">Content</td>
        </tr>
        <tr>
            <td class="td-child" colspan="4">CDR1005</td>
            <td class="td-child" colspan="4">Front/Rear</td>
            <td class="td-child" colspan="4">4 identical pads</td>
        </tr>
        <tr>
            <td class="td-parent" colspan="3">Meritor</td>
            <td class="td-parent" colspan="3">Mercedes</td>
            <td class="td-parent" colspan="3">Renault</td>
            <td class="td-parent" colspan="3">WVA</td>
        </tr>
        <tr>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
            <td class="td-child" colspan="3">TBA</td>
        </tr>
        <tr>
            <td class="td-parent" colspan="4">A</td>
            <td class="td-parent" colspan="4">B</td>
            <td class="td-parent" colspan="4">C</td>
        </tr>
        <tr>
            <td class="td-child" colspan="4">250</td>
            <td class="td-child" colspan="4">118</td>
            <td class="td-child" colspan="4">28</td>
        </tr>
    </tbody>
</table>
</div>
1  
2017-07-17 09:32:41

Используйте это:

  • для th clspan = 12
  • для 3 столбцов в строке используйте colspan = 4 (3 * 4 = 12)
  • для 4 столбцов в строке используйте colspan = 3 (4 * 3 = 12)

Используйте этот CSS: 

table{margin-top:50px;table-layout:fixed}
thead tr th,thead tr td{text-align:center}
.td-parent{font-weight:bold}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<table class="table table-bordered table-striped">
	<thead>
		<tr>
			<th colspan="12">SPECIFICATION</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="td-parent" colspan="4">Part Number</td>
			<td class="td-parent" colspan="4">Position</td>
			<td class="td-parent" colspan="4">Content</td>
		</tr>
		<tr>
			<td class="td-child" colspan="4">CDR1005</td>
			<td class="td-child" colspan="4">Front/Rear</td>
			<td class="td-child" colspan="4">4 identical pads</td>
		</tr>
		<tr>
			<td class="td-parent" colspan="3">Meritor</td>
			<td class="td-parent" colspan="3">Mercedes</td>
			<td class="td-parent" colspan="3">Renault</td>
			<td class="td-parent" colspan="3">WVA</td>
		</tr>
		<tr>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
			<td class="td-child" colspan="3">TBA</td>
		</tr>
		<tr>
			<td class="td-parent" colspan="4">A</td>
			<td class="td-parent" colspan="4">B</td>
			<td class="td-parent" colspan="4">C</td>
		</tr>
		<tr>
			<td class="td-child" colspan="4">250</td>
			<td class="td-child" colspan="4">118</td>
			<td class="td-child" colspan="4">28</td>
		</tr>
	</tbody>
</table>
</div>
1  
2018-05-30 18:20:20

Мое личное мнение, сделать одинаковую ширину разных строк, делая отдельные таблицы-это единственный способ.

Я надеюсь, что это сработает.

table { table-layout: fixed; }
.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33.3%; }
.col-4 { width: 25%; }
.col-5 { width: 20%; }
.col-6 { width: 16.66666667%; }

.table-head
{
  border: 1px solid black;
  margin-bottom: 0 !important;
  padding-bottom: 0;
  text-align: center;
}

.table-body 
{
     border: 1px solid black;
     border-top: 0;
     margin-top: 0;
     padding-top: 0;
     margin-bottom: 0;
     padding-bottom: 0;
}



tr, th, td {
  text-align: center !important;
}

.td-parent {
  font-weight: bold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">      
  <table class="table table-bordered table-striped table-head">
      <tr>
        <th class="col-1" colspan="3">SPECIFICATION</th>
      </tr>
  </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent col-3" >Part Number</td>
        <td class="td-parent col-3" >Position</td>
        <td class="td-parent col-3" >Content</td>
      </tr>
      <tr>
        <td class="td-child col-3" >CDR1005</td>
        <td class="td-child col-3" >Front/Rear</td>
        <td class="td-child col-3" >4 identical pads</td>
      </tr>
   </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent col-4" >Meritor</td>
        <td class="td-parent col-4" >Mercedes</td>
        <td class="td-parent col-4" >Renault</td>
        <td class="td-parent col-4" >WVA</td>
      </tr>
      <tr>
        <td class="td-child col-4" >TBA</td>
        <td class="td-child col-4">TBA</td>
        <td class="td-child col-4" >TBA</td>
        <td class="td-child col-4">TBA</td>
      </tr>
  </table>
  <table class="table table-bordered table-striped table-head">
      <tr>
        <td class="td-parent" >A</td>
        <td class="td-parent" >B</td>
        <td class="td-parent" >C</td>
      </tr>
      <tr>
        <td class="td-child" >250</td>
        <td class="td-child" >118</td>
        <td class="td-child" >28</td>
      </tr>
  </table>
</div>
0  
2017-07-17 09:49:17

Comments

    Ничего не найдено.
Click here to cancel reply.