3

この外観を得るには、テーブルの最初の列のヘッダーを非表示にします。

希望の外観のテーブル

だから私はCSSvisibility: hidden;を使ってそうしています。上のスクリーンショットはChromeで撮影されたもので、完全に機能します。ただし、これはFirefoxで発生します。

Firefoxが同じCSSを処理する方法

Firefoxにテーブルの最初の列のヘッダーを非表示にするにはどうすればよいですか？



編集：要求に応じて、これが私のテーブルCSSです：

.styledtable{
    width:100%;
    table-layout:fixed; /*each column same width, unless width explicitly specified*/
    border:1px solid black;
    border-collapse:collapse;
}
.styledtable td, .styledtable th{
    border:1px solid black;
    padding:3px;
}

.styledtable th{ background:#cfcfcf; }
.styledtable td{ background:white; }

/* in a table with the first columnn empty (ie. with actions in the column below it),
 * make the first column take up space, but not actually appear.
 * Usage: <th style="width:40%;" class="firstcol">&nbsp;</th>
 */
.firstcol{
    visibility:hidden;
}

/*every second row different color, if the table itself doesn't have the class "no-odd-row-highlight"*/
.styledtable:not(.no-odd-row-highlight) tr:nth-child(odd) td{ background:#eeeeee; }
4

2 に答える 2

2

これは、すべての主要なブラウザーで機能します。

<style type="text/css">
table {
    border: none;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

table th,
table td {
    margin: 0;
    background: #fff;
    border: 1px solid #000;
    padding: 0;
}

table th.hidden {
    border: none;
    visibility: hidden;
}
</style>

<table>
<tr>
<th class="hidden"></th>
<th>ID</th>
<th>Something</th>
</tr>
<tr>
<td>Options</td>
<td>1</td>
<td>---</td>
</tr>
</table>
于 2013-01-27T02:26:17.540 に答える