isomi 2023-04-14 00:22 采纳率: 100%
浏览 33
已结题

如何用typroa写表格但是背景色有问题?

img

背景色填不满怎么办?!( ๑ŏ ﹏ ŏ๑ )


<table><tbody>
    <tr>
        <th rowspan="3">魈宝可爱捏</th>
        <th><td bgcolor="LightSeaGreen">生日</font></th>
        <td>4月17日</td>
        <th><td bgcolor="LightSeaGreen">所属</font></th>
         <td>璃月仙人</td>
    </tr>
    <tr>
        <th><td bgcolor="LightSeaGreen">定位</font></th>
        <td>爆发性输出角色</td>
    <th><td bgcolor="LightSeaGreen">武器类型</font></th>
    <td>长柄武器</td>
    </tr>
    <tr>
    <th><td bgcolor="LightSeaGreen">命之座</font></th>
    <td>金翅大鹏王座</td>
    <th><td bgcolor="LightSeaGreen">称号</font></th>
    <td>护法夜叉</td>
</tr></tbody>
</table>

  • 写回答

2条回答 默认 最新

  • Leodong. 2023-04-14 09:23
    关注

    该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下:
    根据您提供的代码,我注意到在表格中使用了bgcolor属性来设置单元格的背景色。但是,这种方法已经被废弃了,不再被HTML和XHTML规范所支持。

    相反,您可以使用CSS样式来设置表格单元格的背景色。为了设置表格的背景色,您可以将CSS样式应用于表格的<table>元素,而为了设置表格单元格的背景色,您可以将CSS样式应用于<td><th>元素。

    下面是一个示例,展示如何使用CSS样式来设置表格和单元格的背景色:

    <style>
      table {
        background-color: LightSeaGreen;
        border-collapse: collapse;
      }
      th, td {
        background-color: white;
        border: 1px solid black;
        padding: 10px;
      }
      /* 奇数行的背景色 */
      tr:nth-child(odd) {
        background-color: LightGray;
      }
    </style>
    
    <table>
      <thead>
        <tr>
          <th rowspan="3">魈宝可爱捏</th>
          <th>生日</th>
          <td>4月17日</td>
          <th>所属</th>
          <td>璃月仙人</td>
        </tr>
        <tr>
          <th>定位</th>
          <td>爆发性输出角色</td>
          <th>武器类型</th>
          <td>长柄武器</td>
        </tr>
        <tr>
          <th>命之座</th>
          <td>金翅大鹏王座</td>
          <th>称号</th>
          <td>护法夜叉</td>
        </tr>
      </thead>
    </table>
    

    在上面的示例中,<style>元素包含了CSS样式,其中包括:

    • table样式设置了表格的背景色为LightSeaGreen,并将单元格之间的边框合并为一个。
    • th, td样式设置了表头单元格和数据单元格的背景色为白色,设置了边框为1个像素的黑色线条,并设置了内边距为10像素。
    • tr:nth-child(odd)样式设置了奇数行的背景色为LightGray

    这样,您就可以使用CSS样式来设置表格和单元格的背景色,而无需使用过时的bgcolor属性。


    如果以上回答对您有所帮助,点击一下采纳该答案~谢谢

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 4月22日
  • 已采纳回答 4月14日
  • 修改了问题 4月14日
  • 创建了问题 4月14日