CODEWITHSUNDEEP
htmlcss
user3177651
user3177651

Reputation:

How to make a column width = fill

I have an HTML table, all columns have fixed width except one column I want it to be "fill" where it fills the remaining space with a min-width set. I tried to use width: auto but that does not fill the remaining space.

Upvotes: 0

Views: 95

Answers (2)

ThorSummoner
ThorSummoner

Reputation: 18109

Here is an example in which the table will be as wide as it can be inside a min-width element.

http://codepen.io/anon/pen/DaLpf/

The trick is to give all columns a fixed width, or a width of 1px and use white-space: nowrap; to fit to content width; Then give your space filling columns a width of auto. The table is givin a width of 100% in this case.

HTML Example

<div>
<table>
  <tbody>
    <tr><td>Some Content</td><td>Fill Column</td></tr>
  </tbody>
</table>
</div>

CSS

div {
  display: inline-block;
  min-width: 500px;
  background-color: lightgrey;
  border: 10px solid grey;
}
table {
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid black;
  padding: 0 25px;
  line-height: 30px;
  white-space: nowrap; 
  width: 1px;
}
td:last-of-type {
  color:red;
  width: auto;
}

Does that help? Its tricky and there are easily tens of ways to approach your desired result.

Upvotes: 1

Derek Story
Derek Story

Reputation: 9593

This is not the standard way to write code in tables, but you can specify the table width, give the first two tds a set width, and don't specify the width of the third: JS Fiddle

<table width="100%">
    <tr>
        <td bgcolor="blue" width="100">test</td>
        <td bgcolor="red" width="100">test2</td>
        <td bgcolor="yellow">test3</td>
    </tr>
</table>

Upvotes: 1

Related Questions