css如何设置表格标题（caption标签）的位置(2)-木庄网络博客

2022-03-27 22:07:22 PHP中文网 JavaScript 百度已收录

2、标题在表格下方

HTML代码：

<table>
    <caption><em>表的标题，位置：底部</em></caption>
   <thead>
      <tr>
        <th>标题内容 1</th>
        <th>标题内容 2</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>页脚内容 1</td>
        <td>页脚内容 2</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>主体内容 1</td>
        <td>主体内容 2</td>
      </tr>
    </tbody>
  </table>

css代码：

caption {
  caption-side: bottom;
  padding: .5em;
  color: #de64a4;
}

效果图：

浏览器支持度：

所有主流浏览器都支持caption-side属性，例如：Chrome，Firefox，Safari，Opera，Internet Explorer 8+以及Android和iOS

注意：

1、IE8只有指定!DOCTYPE才支持caption-side属性。

2、在Firefox中支持left和right这两种非标准值。

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。

以上就是css如何设置表格标题（caption标签）的位置的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css如何设置表格标题（caption标签）的位置

css如何设置表格标题（caption标签）的位置

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论