CSS Note 1.7 table属性及列表属性

最新推荐文章于 2023-03-02 21:26:30 发布

原创最新推荐文章于 2023-03-02 21:26:30 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table属性 #list-style属性

CSS Note 专栏收录该内容

18 篇文章

订阅专栏

一、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test4.css">
</head>
<body>
    <table border="2" >
        <caption>表格标题</caption>
        <tr ><td>1111111111111111111111s s是事实是是s1bbbbbbbbbbbbbbbbbbbbbbbbb表格标题表格标题表格标题表格标题 dafad11</td><td></td><td>3</td></tr>
        <tr><td>2</td><td>3</td><td>4</td></tr>
        <tr><td>3</td><td>4</td><td>5</td></tr>
    </table>
    <ul>
        <li>222222222222222222222222222222222</li>
        <li>3333333333333</li>
        <li>444444444444444</li>
    </ul>
</body>
</html>

二、CSS

@charset "UTF-8";

table{
    width: 500px;
    border-collapse: collapse;
    border-spacing: 1px;
    caption-side: bottom;
    empty-cells: hide;
    table-layout: fixed;
    word-break:break-all;
}
ul{
    list-style-position: outside;
    width: 30px;
    word-break:break-all;

}

/*border-collapse:collapse将单元格的边框合并，默认值separate为隔离/分开的意思
  border-spacing: 1px;设置单元格之间边框的距离，默认是2px
  caption-side: bottom;设置标题的位置
   empty-cells: hide;用来设置空单元格是否显示,如果border-collapse为合并边框的话，设置无效,show为显示
   table-layout: auto;默认值auto表格宽度自适应文字，fixed不会改变单元格宽度，会进行换行，数字或字母的换行需要设定word-break:break-all属性
   list-style-possition的值为insid时列表各项的文字以标志上下对齐；为outside时列表第一行文字上下对齐
   list-style-image将图像设置为列表项标志
   list-style-type的其他的值参照HtmlNote中列表元素的使用*/

三、效果展示