wjg123qwe 2022-01-10 12:03 采纳率: 87.5%
浏览 91
已结题

table的右边框比其他地方粗？为什么

问题遇到的现象和发生背景

为什么table的右边框比其他的要粗？

问题相关代码，请勿粘贴截图
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table caption {
            background-color: black;
            color: white;
            white-space: nowrap;
            padding: 5px;
        }
        
        table tr td {
            height: 50px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid;
        }
        
        table {
            /* border-spacing: 0px; */
            border-collapse: collapse;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <table>
        <caption>这是这个表格的标题</caption>
        <tr>
            <td>哈哈</td>
            <td>呜呜</td>
        </tr>
        <tr>
            <td>哈哈</td>
            <td>呜呜</td>
        </tr>
    </table>
</body>

</html>
运行结果及报错内容

img

我的解答思路和尝试过的方法
我想要达到的结果
  • 写回答

3条回答 默认 最新

  • 神仙别闹 2022-01-10 14:28
    关注

    img

    这个是你要的效果

    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table caption {
            background-color: black;
            color: white;
            white-space: nowrap;
            padding: 5px;
        }

        table tr td {
            height: 50px;
            text-align: center;
            vertical-align: middle;
            border-left: 1px solid;
            border-top: 1px solid
        }

        table {
            /* border-spacing: 0px; */

            border-right: 1px solid;
            border-bottom: 1px solid;
        }
    </style>
</head>

<body>
    <table cellpadding="0" cellspacing="0">
        <caption>这是这个表格的标题</caption>
        <tr>
            <td>哈哈</td>
            <td>呜呜</td>
        </tr>
        <tr>
            <td>哈哈</td>
            <td>呜呜</td>
        </tr>
    </table>
</body>

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

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 1月24日
  • 已采纳回答 1月24日
  • 创建了问题 1月10日

悬赏问题

  • ¥15 类图中关联与聚合的区别
  • ¥15 ENVI高分五号去除云层的方法
  • ¥15 16进制数据如何得到奇偶校验位
  • ¥15 求合并两个字节流VB6代码
  • ¥15 Pyqt 如何正确的关掉Qthread，并且释放其中的锁？
  • ¥30 网站服务器通过node.js部署了一个项目！前端访问失败
  • ¥15 WPS访问权限不足怎么解决
  • ¥15 java幂等控制问题
  • ¥15 海湾GST-DJ-N500
  • ¥15 氧化掩蔽层与注入条件关系