html table column width
Question
How to fix bottom column ? Width 50% not really working. I want to do 2 row and 3 row bottom same width.
<!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 answers
solution1
3 2018-10-17 21:13:40
Table columns are inter-connected. So that if you place some content that forces a cell to grow wider, the entire column grows wider.
That means that all rows must have the same number of cells. However, you can merge 2 or more cells by using colspan attribute.
If you want to have 2 columns on one row and 3 columns on others, you probably want to set 6 cells and use colspan in both cases:
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>
I made them 6 columns as it's easier to visualize. But, in reality the 2 columns on each side can be merged, as they are always colspan-ed together:
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>
solution2
1 2018-10-17 21:13:25
Use colspan='2' on first row second column.
<!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>
solution3
0 2018-10-17 21:22:08
You can use colspan to tell the browser how many columns to want a cell to occupy:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.