组件表格 table

最新推荐文章于 2022-12-09 11:54:18 发布

慢慢走的小可爱

最新推荐文章于 2022-12-09 11:54:18 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/zxjsm/article/details/102983584

版权

表格 table （基础表格）

html

<div class="box">
	<table class="table">
            <thead>
                <tr>
                    <th>表头1</th>
                    <th>表头2</th>
                    <th>表头3</th>
                    <th>表头4</th>
                    <th>表头5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                </tr>
                <tr>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                </tr>
                <tr>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                </tr>
                <tr>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                </tr>
                <tr>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                    <td>表格001</td>
                </tr>
            </tbody>
        </table>
</div>

css

.box {
        width: 70%;
        margin: 0 auto;
    }
    /* 清空表格默认样式 */
table{
    background-color:transparent;
    /* 表格塌陷 */
    border-collapse:collapse;
    border:0;
    }
    th {
  font-weight: bold;
  color: #909399;
}
.table {
  width: 100%;
  min-width: 100%;
  margin-bottom: 20px;
}
.table td{
	border:1px solid #e0e0e0;
	border-left:1px solid transparent;
	border-right:1px solid transparent;
	color: #606263;
  padding: 10px 0 10px 15px;
}
.table > thead > tr > th {
  text-align: left;
  font-weight: 600;
  color: #606263;
  padding: 10px 0 10px 15px;
}