CODEWITHSUNDEEP
htmlcss
codeCompiler77
codeCompiler77

Reputation: 516

Table css width is broken by colspan attribute

When you create a table with

table-layout: fixed;

and it consumes 100% width. Then you try to create 4 columns (10%, 10%, 40%, 40%)

However, some rows are only 2 columns long so we use colspan="2", this however breaks the predefined width value and distributes everything evenly.

My current solution is to have nested tables in td tags.

Is there a better way to do this or stop the colspan from breaking my width?

A simple 2 column example that breaks is below:

EDIT: CODE Updated the code for a better example.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  table {
    table-layout: fixed;
   }
  </style>    
</head>
<body>
<table style="width: 100%">
  <caption>Table of Contents</caption>
  <tbody>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>3</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

UPDATED WITH SOLUTION

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>
<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="short" />
    <col class="long" />
  </colgroup>
    <tr>
      <td colspan="3">
        <div>Table of Contents</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>3</div>
      </td>
      <td>
        <div>-</div>
      </td>
      <td>
        <div>Chapter Name</div>
      </td>
    </tr>
</table>
</body>
</html>

CSS

table {
  table-layout: fixed;
}
.short {
  width: 5%;
}
.long {
  width: 90%;  
}


table {
  table-layout: fixed;
}
.short {
  width: 5%;
}
.long {
  width: 90%;  
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>
<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="short" />
    <col class="long" />
  </colgroup>
    <tr>
      <td colspan="3">
        <div>Table of Contents</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>3</div>
      </td>
      <td>
        <div>-</div>
      </td>
      <td>
        <div>Chapter Name</div>
      </td>
    </tr>
</table>
</body>
</html>

Upvotes: 3

Views: 2818

Answers (3)

Marc Bell&#234;tre
Marc Bell&#234;tre

Reputation: 597

You can use colgroup (original answer here)

html * {
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

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

th,
td {
  padding: 15px;
  word-break: break-all;
  border: 1px solid black;
}

.short {
  width: 5%;
}

.long {
  width: 95%;
}
<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="long" />
  </colgroup>
  <tr>
    <td colspan="2">
      <div style="font-size: 300%;">Table of Contents</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>1</div>
    </td>
    <td>
      <div>2</div>
    </td>
  </tr>
</table>

Upvotes: 4

JDB
JDB

Reputation: 25810

Have you considered using a caption tag?

The caption element is semantically defined as the title for a table (which is what you are trying to do) and has been available since at least HTML 3.2. It is compatible with all browser versions, including IE6. You can style it with CSS to achieve the look & feel you're after.

html *
{
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

table {
  table-layout: fixed;
}

table caption {
  font-size: 300%;
}

th, td {
  padding: 15px;
  word-break: break-all;
}
<table style="width: 100%">
  <caption>Table of Contents</caption>
  <tbody>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;">
        <div>Name</div>
      </td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Patrick Moore
Patrick Moore

Reputation: 13344

Is there any reason you can't simply specify table { width: 100%; } instead of using table-layout: fixed; ?

html *
{
   font-size: 98%;
   color: #000;
   font-family: Arial !important;
}
table {
   width:100%;
}

th, td {
    padding: 15px;
    word-break: break-all;
    background:#ccc;
}

https://jsfiddle.net/L05v6s8z/

Upvotes: 1

Related Questions