CODEWITHSUNDEEP
htmlcsshtml-tableformatting
Evertras
Evertras

Reputation: 109

Matching the width of a table column to text in a fixed width table (HTML/CSS)

I have a table of log entries that I want to display with two columns: the timestamp, and the log entry itself. The table has a fixed width. I want the timestamp column to stretch to fit the text of the timestamp itself and go no further, then let the rest of the table's width be taken up by the message. I want the timestamp text to always be one line and let the log message wrap around. I have that part working, but for the life of me I can't figure out how to make the column width fit the text width of the timestamp. I can do a fixed pixel width, but that seems iffy for this.

EDIT: Updated with code example: (http://jsfiddle.net/GH7jj/7/)

<div class="MainDiv">
<table class="LogTableStyle">
<tr>
    <th>Time</th>
    <th>Message</th>
</tr>
<tr>
    <td class="LogTime">11/07/2012 07:38:14</td>
    <td class="LogMessage">There was something that happened at this point.  This is a pretty long message though.  It should be wrapping around.  I want the timestamp to be on that one line while giving this message as much room as possible.  That'd be cool.</td>
</tr>
</table>
</div>​

And the CSS:

.MainDiv {
    min-width:300px;
    max-width:500px;
    height:100%;
    background-color:#F0F0FF;
    margin:auto;
}
.LogTableStyle {
    width:97%;
    margin:auto;
    border-collapse:collapse;
    table-layout:fixed;
}
.LogTableStyle th {
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    background-color:#333;
    color:#FFF;
    border:solid 1px #000;
    padding:3px;
    border-left-style: none;
    border-right-style: none;
}
.LogTableStyle td {
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
}
.LogTime {
    white-space:nowrap;
}
.LogMessage {
    overflow:hidden;
    text-overflow:ellipsis;
}​

Upvotes: 5

Views: 4734

Answers (1)

robert
robert

Reputation: 5283

/* http://jsfiddle.net/oatkiller/GH7jj/9/ */

.LogTableStyle {
    width:97%;
    margin:auto;
    border-collapse:collapse;
}

I just removed table-layout: fixed from your CSS. Is this what you intended to do?

Quotes from w3schools:

auto
Automatic table layout algorithm (this is default): The column width is set by the widest unbreakable content in the cells Can be slow, since it needs to read through all the content in the table, before determining the final layout

fixed Fixed table layout algorithm: The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells Allows a browser to lay out the table faster than the automatic table layout The browser can begin to display the table once the first row has been received

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Upvotes: 2

Related Questions