Question

我想使用CSS类进行以下操作 - 尽可能简单：

<table cellspacing="0" cellpadding="0">
    <tr>
        <td style="color:red;text-decoration:underline;padding-right:50px;">cell1</td>
        <td style="color:red;text-decoration:underline;">cell2</td>
    </tr>
    <tr>
        <td style="color:red;text-decoration:underline;padding-right:50px;">cell3</td>
        <td style="color:red;text-decoration:underline;">cell4</td>
    </tr>
</table>

最好的方法是什么？

Answer 1

这应该这样做。

标记

<table>
    <tr>
        <td>cell1</td>
        <td>cell2</td>
    </tr>
    <tr>
        <td>cell3</td>
        <td>cell4</td>
    </tr>
</table>

CSS

table td {color:#ff0000; text-decoration:underline;}
table td:first-child {padding-right:50px;}

Answer 2

<table cellspacing="0">的CSS等效项

table {
    border-collapse: collapse;
}

<table cellpadding="0">是

table td {
    padding: 0;
}

所以，这应该做：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 4528942</title>
        <style>
            table {
                border-collapse: collapse;
            }
            table td {
                padding: 0;
                color: red;
                text-decoration: underline;
            }
            table td:first-child {
                padding-right: 50px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>cell1</td>
                <td>cell2</td>
            </tr>
            <tr>
                <td>cell3</td>
                <td>cell4</td>
            </tr>
        </table>
    </body>
</html>

Answer 3

正确的解决方案实际上取决于您的使用案例。当您创建标记时，考虑内部的内容非常重要。对于诸如日历之类的东西，表格可能是正确的答案，而对于图像库，框格布局可能更适合。

这是针对您的问题的无表格提案，我希望它有用：）

<style>
  #container{
    width: 200px;
    overflow: hidden;
  }
  .cell{
    width: 80px;
    margin-right: 20px;
    float: left;
  }
</style>
<div id="container">
  <div class="cell">Cell 1</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3</div>
  <div class="cell">Cell 4</div>
</div>

Answer 4

将CSS用于此表

table {
    border-collapse: collapse;
}

表格单元格之间有空格

4 个答案: