我想table中的第一列文字不是紧挨边界,第一行的背景色是灰色,并且单元格之间没有间隔,怎么写css?

<table>
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
        <td>34</td>
        <td>35</td>
    </tr>
</table>
阅读 3.5k
2 个回答

table
{
border-collapse:collapse;
}

table, td, th
{
border:1px solid black;
}
th
{

background-color:#666666

}
.first_col{
text-align:center
}

11 12 13 14 15
21 22 23 24 25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        table
        {
            border-collapse:collapse;
        }
        table, td, th
        {
            border:1px solid black;
        }
        th
        {

            background-color:#666666
        }
        .first_col{
            text-align:center
        }
        */
        #table01
        {
            border-collapse:collapse; /* collapse 如果可能,边框会合并为一个单一的边框 */
        }
        #table01 td{
            width: 100px;
        }
        #table01 tr:first-child{
            background-color: aqua;
        }
        #table01 tr:nth-child(2) {
            background-color: blue;
        }

        #table02{
            margin-top: 50px;
        }
        .first_col{
            text-align:center
        }
    </style>
</head>
<body>
<div>
    <table id="table01">
        <tr>
            <td class="first_col">11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
        </tr>
        <tr>
            <td class="first_col">21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
        </tr>
        <tr>
            <td class="first_col">31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
            <td>35</td>
        </tr>
    </table>
</div>


<div>
    <table id="table02">
        <tr>
            <td>51</td>
            <td>52</td>
            <td>53</td>
            <td>54</td>
            <td>55</td>
        </tr>
        <tr>
            <td>61</td>
            <td>62</td>
            <td>63</td>
            <td>64</td>
            <td>65</td>
        </tr>
        <tr>
            <td>71</td>
            <td>72</td>
            <td>73</td>
            <td>74</td>
            <td>75</td>
        </tr>
    </table>
</div>


</body>
</html>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题