CODEWITHSUNDEEP
htmlcss
Valip
Valip

Reputation: 4620

Table body with full screen width

I have a table and one div, a box for example. How can I make the thead to take full width up to that div and then make the tbody to take the entire screen width? Is this even possible?

enter image description here

An important aspect is that I must not use fixed values because the table must be responsive.

JS Fiddle

HTML:

<table>
  <thead>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
    <th>Header 4</th>
  </thead>
  <tbody>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
    <tr>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
      <td>cell</td>
    </tr>
  </tbody>
</table>
<div class="box">
  box
</div>

CSS:

table, th, td {
  border: 1px solid black;
}
.box {
  width: 50px;
  height: 20px;
  background:blue;
  color: white;
  float:left;
}
table {
  float: left;
}

Upvotes: 1

Views: 2300

Answers (1)

Mi-Creativity
Mi-Creativity

Reputation: 9654

You may achieve this by creating another empty th as the last one, and in every last td of your tables rows add colspan="2".

UPDATE: wrapped the table and the .box div with a container div .table-container, set its position:relative with width:100%, table to extend to fill its container in order to "make the tbody to take the entire screen width" and assign a position:absolute to the .box div to position it on the top right corner with top:0; right:0. Also removed float from the table and the .box

JS Fiddle - updated

html, body {
  padding: 0;
  margin: 0;
}
.table-container {
  position: relative;
  display: inline-block;
  width: 100%;
}
table {
  width: calc(100% - 2px);
}
/* no need for table rule here */
th, td {
  border: 1px solid black;
}
th {
  width: 100px;
}
th:last-child {
  border: none;  /* remove borders from last th */
}
.box {
  width: 50px;
  height: 20px;
  background: blue;
  color: white;
  position: absolute;
  top: 0;
  right: 1px;
}
<div class="table-container">
  <table>
    <thead>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
      <th>Header 4</th>
      <th></th>
    </thead>
    <tbody>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
      <tr>
        <td>cell</td>
        <td>cell</td>
        <td>cell</td>
        <td colspan="2">cell</td>
      </tr>
    </tbody>
  </table>
  <div class="box">
    box
  </div>
</div>

Upvotes: 1

Related Questions