CODEWITHSUNDEEP
htmlcsshtml-table
daydreamer
daydreamer

Reputation: 67

Colspan and table-layout:fixed break my table style

I have a table where I need the rows to have specific widths. But colspan and table-layout:fixed break the style I want. Note that I can NOT change anything in the html code, I also can't remove the table-layout:fixed. Is what I want possible to do with only css? Or is it something that can't be done unless the html is changed? 

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

th:first-child,
td:first-child {
  width: 5%;
  background-color: lightblue;
}

td:nth-child(2),
tr:last-child th:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

td:nth-child(3),
th:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

td:nth-child(4),
th:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

td:last-child,
th:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}
<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

Here is the visual of what I want

Here is the visual of what I get

Upvotes: 5

Views: 2652

Answers (4)

Razib Hossain
Razib Hossain

Reputation: 756

jsfiddle link here

/*I think this is the minimal way**/
table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  border: 1px solid black;
}
.text-center{
  text-align:center;
}
<table>
  <thead>
    <tr class="text-center">
      <th >1</th>
      <th colspan="19">2</th>
    </tr>
  </thead>
  <tbody>
    <tr class="text-center">
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
     <tr>
      <td>a</td>
      <td colspan="14">b</td>
      <td colspan="2">c</td>
      <td colspan="2">d</td>
      <td>e</td>
    </tr>
  </tbody>

Upvotes: 0

Pete
Pete

Reputation: 58422

Table layout fixed means that the table will use the first row to define it styles - as you have a colspan of 4 in your first row, it will not know what widths to give to the columns in the second row and therefore splits them equally.

From MDN about table layout fixed:

Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

In order to get around this, you can define a colgroup and then give your widths to those columns and they will be applied to the rest of the table:

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

col:first-child {
  width: 5%;
  background-color: lightblue;
}

col:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

col:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

col:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

col:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}
<table>
    <colgroup>
        <col>
        <col>
        <col>
        <col>
        <col>
    </colgroup>
  <thead>
    <tr>
      <th class="col1">1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th class="col1">a</th>
      <th class="col2">b</th>
      <th class="col3">c</th>
      <th class="col4">d</th>
      <th class="col5">e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

If you cannot change the html, and you have to have layout fixed, then you cannot do anything about the widths of the second row.

The best you can do with purely css is to remove the layout fixed (you didn't explain why this is needed) and just style the tds:

table {
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

td:first-child {
  width: 5%;
  background-color: lightblue;
}

td:nth-child(2) {
  width: 70%;
  background-color: lightpink;
}

td:nth-child(3) {
  width: 10%;
  background-color: lightgreen;
}

td:nth-child(4) {
  width: 10%;
  background-color: #a9a9a9;
}

td:nth-child(5) {
  width: 5%;
  background-color: #d4d4d4;
}
<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="4">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th>b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

Upvotes: 3

sridhar
sridhar

Reputation: 622

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  border: 1px solid black;
}

th:first-child,
td:first-child {
  background-color: lightblue;
}

td:nth-child(2),
tr:last-child th:nth-child(2) {
  background-color: lightpink;
}

td:nth-child(3),
th:nth-child(3) {
  background-color: lightgreen;
}

td:nth-child(4),
th:nth-child(4) {
  background-color: #a9a9a9;
}

td:last-child,
th:nth-child(5) {
  background-color: #d4d4d4;
}
<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="6">2</th>
    </tr>
    <tr>
      <th>a</th>
      <th colspan="3">b</th>
      <th>c</th>
      <th>d</th>
      <th>e</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a</td>
      <td colspan="3">b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td colspan="3">b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
    <tr>
      <td>a</td>
      <td colspan="3">b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

table-layout:fixed

apply when the table and column widths are set by the widths of table and col or by the width of the first row of cells. Cells in other rows do not affect column widths - table-layout property understanding, so you need to give table { table-layout: auto!important; }

Upvotes: 0

Related Questions