All geek questions in one place

Specify the width and alignment of column text

Is it possible to specify the column width of a table as a percentage using css? Can you also specify text alignment for a specific column?

For example, I have a table with three columns. I would like to say

col1.width = 20% col2.width = 40% col3.width = 40% col1.text-align = left; col2.text-align = right; col3.text-align = center;
+4
source share
2 answers

Regarding the first question: create classes that you assign to each col umn. Rather simple.

Text matching is a bit more complicated as you can assign multiple properties to the columns of the table as a whole. In this case, one solution would be to use the nth-child pseudo-class, but this is a special CSS 3 function that does not work in any of the current versions of Internet Explorer. As suggested by this answer , you can also use combinator + to create adjacent columns. That CSS 2.1 feature is supported by IE> = 7 .

 <!DOCTYPE html> <head> <meta charset=UTF-8> <title>Column styling</title> <style> table { table-layout: fixed; width: 1000px; } .firstColumn { width: 20%; background: #ccc; } .otherColumns { width: 40%; background: #eee; } td { text-align: left } td+td { text-align: right } td+td+td { text-align: center } </style> </head> <body> <table> <col class="firstColumn"> <col class="otherColumns"> <col class="otherColumns"> <tr> <td>bla</td> <td>bla</td> <td>bla</td> </tr> <tr> <td>bla</td> <td>bla</td> <td>bla</td> </tr> <tr> <td>bla</td> <td>bla</td> <td>bla</td> </tr> </table> </body> </html>
+1
source

You can do this, but your <td> widths refer to the parent container at that point.

0
source

Source: https://habr.com/ru/post/1312911/

More articles:


All Articles