Question

我需要在网格（表）的3列中跨栏文字。它应从第3列开始，并在第5列的末尾包装。

我只是通过在第3列的类中添加css样式来实现跨度-溢出：可见

但是现在我需要在第5列的末尾限制此跨度，并在该处换行。

我没有选择修改表的html的选项，以使其包含另一个表或col-span属性。网格是动态的。是否可以通过一些JavaScript和CSS实现它？

Answer 1

使用colspan

<table>
 <caption>Life Expectancy By Current Age</caption>
 <tr>
  <th colspan="2">65</th>
  <th colspan="2">40</th> 
  <th colspan="2">20</th> 
 </tr> 
 <tr> 
   <th>Men</th> 
   <th>Women</th> 
   <th>Men</th> 
   <th>Women</th> 
   <th>Men</th> 
   <th>Women</th> 
 </tr> 
 <tr> 
   <td>82</td> 
   <td>85</td> 
   <td>78</td> 
   <td>82</td> 
   <td>77</td> 
   <td>81</td> 
 </tr> 
</table>

了解更多：https://html.com/tables/rowspan-colspan/#ixzz5oaCH7Owk

Answer 2

在元素中使用column-span css属性。做style =“ column-span：2;”。这样可以确保您只需要2列，该列应该从第3列开始（因为您已经设置好了），而在第5列结束。

您可以在此处了解更多信息：https://www.w3schools.com/csSref/css3_pr_column-span.asp

注意：如果要在表中进行操作，最好使用colspan，如下面的示例所示。两者都可以，但是colspan具有更好的浏览器支持，并且是专为表设计的。更新：

       <tr>
           <td>
               this is a normal column
           </td>
           <td colspan="2">
               this is the column taking from 3th to 5th columns
           </td>
           <td>
               this is a normal column
           </td>
       </tr>

如何在表的几列上创建文本？

2 个答案: