具有可变，固定和剩余宽度的HTML表

Question

I need to create an HTML table with the following layout:

[Name] [Message] Date]

Where the width of [Name] should be the width of the longest name (Up to a max), [Date] should be a fixed width of 95px (And floating to the right), while [Message] should take the remaining width.

I've tried using multiple div's , but I can't get the result I need, and a table seems much simpler.

So far, the following isn't working:

<table style="width: 100%">
<tr>
<td style="width: 100%; max-width: 100px">NAME</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
<tr>
<td style="width: 100%; max-width: 100px">NAME OTHER</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>

Edit 1 Seems as though this example has exactly what I need. Although I still think a table would be neater.
Edit 2 The [Message] needs to allow for multiline...
Edit 3 Here is a working sample of what I need (Exactly) based on the link in Edit 1

Answer 1

This cannot be done in CSS alone, due to the requirements. The first column should be flexible, which is easy (just prevent line breaks and let the column take its natural width), and setting the last column width is trivial, but telling the browser to use all the rest in the mid column (instead of expanding the first column too) cannot be done in CSS. If you set its width to 100%, things work the desired way in some browsers, but other browsers (like IE) treat it differently. You would require a width of something plus 100% plus 95px to equal 100%, which is of course impossible, and browsers handle this in different ways.

However, with a little bit of JavaScript the medicine goes down: do as outlined above, with 100%, then postprocess the table by setting the first column to a specific width in pixels (using the value allocated by the browser), remove the width: 100% setting, and set table layout to fixed—which means that the browser now has two columns width fixed width, total width set to 100%, and one column with no width set, so it is easy to it to allocate the remaining width to the mid column.

<style>
td:first-child  { white-space: nowrap }
td:nth-child(2) { width: 100% }
td:nth-child(3) { width: 95px }
</style>
<table border cellspacing=0 style="width: 100%">
<tr>
<td style="">NAME</td>
<td style="">message</td>
<td style="width:95px">TIME</td>
</tr>
<tr>
<td>NAME OTHER</td>
<td>message</td>
<td>TIME</td>
</tr>
</table>
<script>
(function () {
var row = document.getElementsByTagName('tr')[0];
var cell1 = row.children[0];
cell1.style.width = cell1.clientWidth + 'px';
row.children[1].style.width = 'auto';
document.getElementsByTagName('table')[0].style.tableLayout = 'fixed';
})();
</script>

For simplicity, this code is based on the assumption that there are no other tables on the page. Modify as needed. The attributes border cellspacing=0 are there just make the cell widths more visible.

Update: This does not address the issue of setting a maximum width on the first column. That requirement is underdefined unless you specify what should happen if the width is exceeded (truncation, word wrap, wrap anywhere, wrap with hyphenation?).

Answer 2

try this code .

.test
{
max-width:100px;
} 


<table style="text-align: center;">
<tr>
<th>NAME</th>
<th>message</th>
<th style="width: 95px">TIME</th>
</tr>
<tr>
<td class="test">NAME OTHER</td>
<td>message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>

Answer 3

The following .css code provides the template for the attached picture:

    table {
        display: table;
        width: 100%;
        table-layout: fixed;
        position: absolute;
        top: 10px;
        empty-cells: hide;
    }

    td.small:first-Child {
        vertical-align: top;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    td.small:last-Child {
        vertical-align: top;
        width: 95px;
    }

    td.extend {
        vertical-align: top;
        word-wrap: break-word;
    }

    .userName a {
        color: #9DC8FC;
    }

---

<tr>
   <td class="small userName">
         <a title="Administrator" href="#">Administrator</a>
   </td>
   <td class="extend">
         is it me you're looking for?
   </td>
   <td class="small">
         10:14:01 AM
   </td>
</tr>