核心内容摘要
跨越界限，品味全球：欧美精产与国品一二三阶梯的非凡之旅
html生成一个五行五列的表格第三列边框是红色其余列边框是黑色要实现“第三列所有边框为红色”且“第二列右边框为红色”的效果最稳妥的方式是分别对这两列进行独立设置。
这样不仅能确保第三列的左边框显示为红色还能让第二列与第三列之间的分隔线即第二列的右边框也变为红色从而达到视觉上的统一。
实现思路第三列设置直接将第三列所有单元格的边框全部设为红色。
第二列设置单独修改第二列单元格的右边框为红色。
完整代码!DOCTYPEhtmlhtmllangzhheadmetacharsetUTF-8/title指定列红色边框/titlestyletable{border-collapse:collapse;/* 合并边框 */width:100%;font-family:Arial,sans-serif;}td, th{border:1px solid black;/* 默认黑色边框 */padding:12px;text-align:center;}/* 第一步将第三列索引3的所有边框设为红色 *//* 这会覆盖掉该列左边原本可能存在的黑色边框 */tr td:nth-child(
, tr th:nth-child(
{border:1px solid red;}/* 第二步将第二列索引2的右边框设为红色 *//* 这样第二列和第三列之间的线就是红色的了 */tr td:nth-child(
, tr th:nth-child(
{border-right:1px solid red;}/style/headbodytabletrtd1,1/tdtd1,2/tdtd1,3/tdtd1,4/tdtd1,5/td/trtrtd2,1/tdtd2,2/tdtd2,3/tdtd2,4/tdtd2,5/td/trtrtd3,1/tdtd3,2/tdtd3,3/tdtd3,4/tdtd3,5/td/trtrtd4,1/tdtd4,2/tdtd4,3/tdtd4,4/tdtd4,5/td/trtrtd5,1/tdtd5,2/tdtd5,3/tdtd5,4/tdtd5,5/td/tr/table/body/html效果说明第 2 列只有右边框是红色的其余三边保持黑色。
第 3 列上、下、左、右四条边框全部是红色。
视觉连接由于第 2 列的右边框和第 3 列的左边框都是红色在视觉上这两条线会连成一条完整的红色竖线。
预览