3

概要:以下のような表を表示する必要があります。

頭と体の間隔が異なるテーブル

必需品:

  • セマンティック HTML コーディング
  • スクリプトなし

HTML:

<table>
<thead>
    <tr>
        <th colspan=2>
            One
        </th>
        <th colspan=2>
            Two
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
    <tr>
        <td>
            One
        </td>
        <td>
            Two
        </td>
        <td>
            Three
        </td>
        <td>
            Four
        </td>
    </tr>
<tbody>
</table>

最初の試み：

「ボーダー崩壊属性」

何度も試してみborder-collapse: separate;ましたが、うまくいきませんでした。theadborder-collapse: collapse;tbody

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table thead {
    border-collapse: separate;
}

table tbody tr {
    border-bottom: 1px solid black;
}

table thead tr th{
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}

table tbody tr td {
    border-bottom: 1px solid black;
    padding: 10px;
}​

JSFIDDLEについて

2 回目の試行:

「空白セルの追加」

HTML コードに空白のセルを追加することで、テーブルの外観を好みに合わせることができます。しかし、このアプローチはセマンティック構造に欠陥があります。

table {
    border-collapse: collapse;
    border-spacing: 1em;
}

table tbody tr {
    border-bottom: 1px solid black;
}

table thead tr th[colspan="2"]{
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}

table tbody tr td {
    border-bottom: 1px solid black;
    padding: 10px;
}​

JSFIDDLEについて

その他いろいろな試み

ヘッダーの境界線も試し-webkit-border-image: -webkit-linear-gradient(left, black 95%, white 5%);ましたが、うまく機能しませんでした。

結局のところ、私は新しい提案に対してオープンです。

注: これは eBook ファイルになります。そのため、一般的な背景色はリーダー アプリケーションによって異なる場合があります。

4

3 に答える 3

6

これが私の試みです。

基本的に私はやった：

table thead tr th[colspan="2"]:first-child {
    border-right: 20px solid white;
}
table thead tr th[colspan="2"]:nth-child(2) {
    border-left: 20px solid white;
}

注:個人的には、このような複雑なセレクターは使用しませんが、これで理解できるはずです。

于 2012-11-26T14:56:48.140 に答える
2

これを行うには、白い境界線を追加します。次に、最初と最後のセルからそれらをオフにする必要があります。

table thead tr th{
    border-left: solid 10px white;
    border-right: solid 10px white;
    border-bottom: 1px solid black;
    padding: 10px;
    text-align: center;
}
table thead tr th:first-child {
    border-left: none;
}
table thead tr th:last-child {
    border-right: none;
}

更新された js フィドルは次のとおりですhttp://jsfiddle.net/davetayls/Tw5Vb/9/

于 2012-11-26T14:59:03.657 に答える