4

タイムスタンプとログ エントリ自体の 2 つの列で表示したいログ エントリのテーブルがあります。テーブルの幅は固定です。タイムスタンプ列をタイムスタンプ自体のテキストに合わせて引き延ばし、それ以上移動しないようにしてから、テーブルの残りの幅をメッセージが占めるようにします。タイムスタンプ テキストを常に 1 行にして、ログ メッセージを折り返すようにします。その部分は機能していますが、私の人生では、列幅をタイムスタンプのテキスト幅に合わせる方法がわかりません。ピクセル幅を固定することはできますが、これは難しいようです。

編集: コード例で更新: (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>​

そして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;
}​
4

1 に答える 1

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

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

CSS から table-layout: fixed を削除しました。これはあなたが意図したことですか？

w3schools からの引用:

auto
自動テーブル レイアウト アルゴリズム (これがデフォルト): 列幅は、セル内の最も幅の広い分割できないコンテンツによって設定されます。最終的なレイアウトを決定する前に、テーブル内のすべてのコンテンツを読み取る必要があるため、遅くなる可能性があります

fixed 固定テーブル レイアウト アルゴリズム: 水平レイアウトは、セルの内容ではなく、テーブルの幅と列の幅にのみ依存します ブラウザーが自動テーブル レイアウトよりも高速にテーブルをレイアウトできるようにします ブラウザーはテーブルの表示を開始できます最初の行が受信されたら

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

于 2012-11-14T22:28:53.647 に答える