0

画像のテーブルのようなテーブルをデザインしたいです。

テーブルの例

空タグを使用してスペースを適用し、次にcssを使用して白くすることはできますが、そのようなコードは醜いです。

これは私が現時点で持っているものです：

<table id="specs">
    <tr>                           
        <th class="thead" >A</th>
        <th class="thead">B</th>
        <th class="thead">C</th>
        <th class="thead">D</th>
        <th class="thead">E</th>
    </tr>
    <tr class="alt">
        <td class="type2">1</td>
        <td class="type">2</td>
        <td class="type">3</td>
        <td class="type"> 4</td>
        <td class="type">5%</td>
        <td class="type" style="border-top:10px solid white;">6</td>
    </tr>
    <tr>
        <td class="type2">7</td>
        <td class="type">8</td>
        <td class="type">9</td>
        <td class="type">10</td>
        <td class="type">11</td>
        <td class="type">12</td>
    </tr>
</table>

CSS:

#specs {
    color: #0099FF;
    font-size: 13px;
    border-collapse: collapse;
}

#specs th {
    background-color: #0099FF;
    color: white;
    padding-left: 50px;
    padding-right: 10px;
    border-bottom: 10px solid white;
}
#specs tr.alt td {
    background-color: #C0D9D9;
}

#specs th.thead {
    padding-right: 30px;
    text-align: center;
}

#specs tr td.type2 {
    border-left: 10px solid white;
    text-align: left;
}
4

3 に答える 3

0

border-leftandを追加する必要がありborder-rightますが、決して機能しtdないため、スタイルを設定しないようにしてください。tr

td:first {
    border-left : 10px solid #ffffff;
}
td:last {
    border-right : 10px solid #ffffff;
}
于 2013-07-09T08:48:25.587 に答える
0

最初にテーブルを適切に形成する必要があります。

<table id="specs">
  <thead>
        <tr>

            <th class="thead" >A</th>
            <th class="thead">B</th>
            <th class="thead">C</th>
            <th class="thead">D</th>
            <th class="thead" colspan="2">E</th>

        </tr>
  </thead>
  <tbody>

        <tr class="alt">

            <td class="type2">1</td>
            <td class="type">2</td>
            <td class="type">3</td>
            <td class="type"> 4</td>
            <td class="type">5%</td>
            <td class="type" >6</td>

        </tr>
        <tr>
            <td class="type2">7</td>
            <td class="type">8</td>
            <td class="type">9</td>
            <td class="type">10</td>
            <td class="type">11</td>
            <td class="type">12</td>

        </tr>
  </tbody>
  </table>

テーブルに何らかの意味を与え、スタイリングを容易にします。たとえば、これを試してください：http://codepen.io/anon/pen/dilzg

于 2013-07-09T08:53:08.363 に答える