我希望HTML表格中的列标题垂直打印

我希望HTML表格中的列标题垂直打印,第1张

概述我想要这张桌子 id name country-- ------- -------1 John America2 Smith Mexico3 Khan India 像这样打印 id 1 2 3name @H_404_1@ 我想要这张桌子

ID     name       country--     -------    -------1       John        America2       Smith        Mexico3       Khan        India

像这样打印

ID            1             2           3name        John          Smith       Khancountry     America       Mexico      India

在HTML中.

<table><tr><th>ID</th><th>name</th><th>country</th></tr><tr><td>1</td><td>John</td><td>America</td></tr>

我应该如何修改上面的代码来获得输出?

解决方法 无论它们是水平还是垂直运行,都使用th作为标题.您可以在同一个表中同时拥有行标题和列标题.您还可以添加可选范围属性以提高可访问性,为您提供一个钩子,以便您可以使用CSS对它们进行不同的样式设置,并使其具有清晰的可维护性.

scope属性指定当前标题单元格为其提供标题信息的数据单元格集.行值为包含它的行的其余部分提供标头信息. col值为包含它的列的其余部分提供头信息.

Read more about the scope attribute.

<table>    <tr>        <th scope="row">ID</th>        <th scope="col">1</th>        <th scope="col">2</th>        <th scope="col">3</th>    </tr>    <tr>       <th scope="row">name</th>       <td>John</td>       <td>Smith</td>       <td>Khan</td>    </tr>    <tr>        <th scope="row">country</th>        <td>America</td>        <td>Mexico</td>        <td>India</td>    </tr></table>

编辑:CSS示例

th[scope=row] { color: green }th[scope=col] { color: blue }
总结

以上是内存溢出为你收集整理的我希望HTML表格中的列标题垂直打印全部内容,希望文章能够帮你解决我希望HTML表格中的列标题垂直打印所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1084316.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存