0

動的に生成されたテーブルがあります。つまり、そのセルの内容はデータベースから取得され、各行はデータベース内の行数に応じて作成されます。

各セルには、たとえば2pxのように、丸みを帯びた境界線とパディングがあります。

私が望む効果は、すべてのセルが等間隔で垂直に埋め込まれているように見えることです。

問題は、このグーグルを解決したり、Stack Exchangeを調べたりすることができなかったため、上部と下部のセルの「上部」と「下部」のパディングが少ないように見えることです。「隣接する」セルのパディングが追加されていないため、他のセルよりも。

上部のセルのみに「padding-top」を追加し、下部のセルのみに「padding-bottom」を追加する方法はありますか、それとも間違った方法で行っていますか？

ps：もう1つの考慮事項は、テーブルが境界線で囲まれていることです。そのため、ソリューションでは、既存の境界線を維持できる（または適用できる）方法でスペースを追加する必要があります。

pps：テーブルのコード構造は次のとおりです。

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="268px">column one</th>
            <th width="156px">column two</th>
            <th width="188px">column three</th>
            <th width="70px">column four</th>
            <th width="62px">column five</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5" class="Tables_empty">loading data</td>
        </tr>
    </tbody>
    <!--<tfoot>
        <tr>
            <th>column one</th>
            <th>column two</th>
            <th>column three</th>
            <th>column four</th>
            <th>column five</th>
        </tr>
    </tfoot>-->
</table>
4

2 に答える 2

2

正確にどのセル？

最初と最後の行のすべてのセルの場合：

table#example tbody tr:first-child td, table#example tbody tr:last-child td { padding: 10px 5px } /* moar padding */

すべての行の最初と最後のセルの場合：

table#example tbody tr td:first-child, table#example tbody tr td:last-child { padding: 10px 5px } /* moar padding */
于 2012-09-17T12:28:24.950 に答える
0

こんにちは今あなたのCSSでこれに慣れています

td{
padding:xxpx xxpx xxpx xxpx; // acording to your design 
}
于 2012-09-17T12:03:26.730 に答える