What Is The Default Width of an HTML Table Cell <Td>

What is the default width of an HTML table cell td?

The physical/visual width of a table cell is defined not by HTML, but by CSS. The CSS 2.1 specification has an entire section dedicated to table layout that complements HTML's description of tabular data.

Furthermore, CSS itself does not fully define how the width of a cell is calculated. It does with the fixed table layout algorithm:

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns.

but it doesn't give anything beyond a rough guideline for auto table layout, which user agents are free to follow or deviate from (it lists a step-by-step procedure not unlike that of fixed table layout, but that entire list is non-normative). Generally you can expect consistent behavior from UAs in the most common scenarios — as you observe, an auto-sized table cell generally takes up as much space as required by its content, and no more. But dig into edge cases, and you'll find all sorts of crazy.

HTML - about table cell width

@ammcom what everyone has said so far is correct. If you go that route and set your empty cells with an explicit width, make sure you also set this in your CSS:
table { table-layout: fixed; } This will make the table honor your explicit widths like if you use 50% for two empty columns. The default behavior is: table-layout: auto which makes the table prioritize it's width according to content within the cells.

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td {  border: 1px solid black;  width: 100px;  overflow: hidden;}

<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped" id="someid">
            <tr>
                <td>row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
            </tr>
            <tr>
                <td>another row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
        </table>
    </div>
</div>

#someid tr td:nth-child(1){
    width:30%;
}

td {
    border: 1px solid #000;
}

tr td:last-child {
    width: 1%;
    white-space: nowrap;
}

<table style="width: 100%;">
    <tr>
        <td class="block">this should stretch</td>
        <td class="block">this should stretch</td>
        <td class="block">this should be the content width</td>
    </tr>
</table>

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

<td width="200">

<td style="width: 200px">

<table style="width: 100%">    <colgroup>       <col span="1" style="width: 15%;">       <col span="1" style="width: 70%;">       <col span="1" style="width: 15%;">    </colgroup>                <!-- Put <thead>, <tbody>, and <tr>'s here! -->    <tbody>        <tr>            <td style="background-color: #777">15%</td>            <td style="background-color: #aaa">70%</td>            <td style="background-color: #777">15%</td>        </tr>    </tbody></table>