CSS 在table td一段文字前面做一个空白小框，空白下划线

最新推荐文章于 2024-04-09 11:49:38 发布

原创最新推荐文章于 2024-04-09 11:49:38 发布 · 736 阅读

1 ·

CC 4.0 BY-SA版权

java 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS创建一个基本的表格，展示了如何设置单元格样式、对齐方式，并通过一个实例演示了预览效果。适合初学者了解网页布局基础。

https://www.cnblogs.com/xiaobaizhiqian/p/8338308.html

https://www.zhihu.com/question/395120933

预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        body{
            width: 21cm;
            height: 27cm;
        }
        table, table td{
            border-collapse: collapse;
            border: 1px solid;
            font-size: 20pt;
            text-align: center;
        }
        .none {
            display: inline-block;
            width: 15px;
            height: 15px;
            border: 1px solid;
            margin-right: 5px;
        }
        .words{
            text-decoration: underline ;
        }
    </style>
</head>
<body>
<table width="100%">
    <tr>
        <td>2332</td>
        <td>333</td>
        <td>111</td>
    </tr>
    <tr>
        <td align="left"><span class="none"></span>2332<span class="words">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></td>
        <td>333</td>
        <td>111</td>
    </tr>
    <tr>
        <td>2332</td>
        <td>333</td>
        <td>111</td>
    </tr>
</table>

<div id="square"></div>
</body>
</html>