All geek questions in one place

Bootstrap data table - different number of row cells with the same width

I have a bootstrap data table (3.3.7) in which I want to put the same width on all tds. In the end, I would like to get all rows with 3 cells in order to get to the right side of the table, keeping the same width in each cell. I did a lot of research to find something similar, but could not, so any help with this would be greatly appreciated.

The following screenshot is what I have: http://i.imgur.com/j033hYy.png

And the following, I would like to modify my table:

enter image description here

.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>
Run codeHide result
+4
source share
4 answers

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>
Hide result
+3

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>
Hide result
+1

:

  • 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, 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>
Hide result
0

My personal opinion is to make the same width of the different rows that make up the individual tables, is the only way.

Hope this works.

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>
Run codeHide result
0
source

Source: https://habr.com/ru/post/1681586/

More articles:


All Articles