html表格列宽
[英]html table column width
问题描述
如何修复底部列？ 宽度50％不能正常工作。 我想做2行和3行底部相同的宽度。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td style="width:50%;">Cell A</td> <td style="width:50%;">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
3 个解决方案
解决方案1
3 2018-10-17 21:13:40
表列是相互连接的。 这样，如果您放置一些迫使单元格变宽的内容，则整个列将变宽。
这意味着所有行必须具有相同数量的单元格。 但是，可以使用colspan属性合并2个或更多单元。
如果要在一行上具有2列，而在另一行上具有3列，则可能需要设置6个单元格并在两种情况下使用colspan ：
td { border: 1px solid #eee; text-align: center; }
<table style="width: 100%;"> <tr> <td colspan="3" style="width:50%;">Cell A</td> <td colspan="3" style="width:50%;">Cell B</td> </tr> <tr> <td colspan="2">Cell A</td> <td colspan="2">Cell B</td> <td colspan="2">Cell C</td> </tr> </table>
我将它们分为6列，因为它更易于可视化。 但是，实际上，两边的两列可以合并，因为它们总是合并在一起的：
td { border: 1px solid #eee; text-align: center; }
<table style="width: 100%;"> <col width="33.3333%"> <col width="16.6667%"> <col width="16.6667%"> <col width="33.3333%"> <tr> <td colspan="2">Cell A</td> <td colspan="2">Cell B</td> </tr> <tr> <td>Cell A</td> <td colspan="2">Cell B</td> <td>Cell C</td> </tr> </table>
解决方案2
1 2018-10-17 21:13:25
在第一行第二列上使用colspan='2' 。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td style="width:50%;">Cell A</td> <td colspan='2' style="width:50%;">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
解决方案3
0 2018-10-17 21:22:08
您可以使用colspan告诉浏览器要一个单元格占用多少列：
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table width="100%"> <tr> <td>Cell A</td> <td colspan="2">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
HTML表中的列宽
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.