Such table is created.

<table class="char"> <col id="param1" /> <col id="dimension1" /> <col id="param2" /> <col id="dimension2" /> <tr> <td><span>Дата</span></td> <td><span>10.08.2009</span></td> <td><span></span></td> <td><span></span></td> </tr> <tr> <td><span>Объектов</span></td> <td><span>10</span></td> <td><span></span></td> <td><span></span></td> </tr> </table>

To her style sheet

 table.char { border: none; } #param1 { width: 40mm; } #dimension1 { width: 40mm; font-weight: bold; } #param2 { width: 35mm; } #dimension2 { width: 40mm; font-weight: bold; }

I do not understand why the width parameter for the table columns works, when the value changes, the column width changes, but font-weight does not. Tell me?

    3 answers 3

    If the table does not have different colspans in different rows, you can use:

     td:nth-child(2), td:nth-child(4) {font-weight:bold}

    or shorter for every second column:

     td:nth-child(2n) {font-weight:bold}
    • No, this is true, but I would not like to use sss3. - Heidel
    • CSS - Table columns > The spec is wrong here; there is no harm in setting them. They should not be overruled by styles of trs or tds, of course. - Yura Ivanov

    The col tag has only attributes: align, char, charoff, span, valign, width ... and font-weight does not. Font-weight should be applied to either td or tr . (More precisely, tr or td set the class and apply font-weight to the class).

    Information here: тег <col> .

     <table class="char"> <col id="dimension1" /> <col id="dimension2" /> <tr id="dimension1"> <td><span>Дата</span></td> <td><span>10.08.2009</span></td> <td><span></span></td> <td><span></span></td> </tr> <tr id="dimension2"> <td><span>Объектов</span></td> <td><span>10</span></td> <td><span></span></td> <td><span></span></td> </tr> </table>​

    -

     table.char { border: none; } #dimension1 { width: 40mm; font-weight: bold; } #dimension2 { width: 40mm; }​
    • jsfiddle.net/jkwe45/VHxFA/1/embedded/result - jkwe45
    • one
      I need to set different font weights not by rows, but by columns, but I don’t want to prescribe the class for each <td> tag, it will clutter the code too much. and as for attributes, you are confusing tag attributes and css-properties, the <table> tag has a border-collapse attribute, for example, it doesn't, but you set this property via css, right? - Heidel pm
    • but in general, you are right, with the help of the col element you can only set the width of the table column ((( - Heidel
    • one
      true, but I can assume that the maximum that you can - put down the id in the cells of one desired column - jkwe45
    • one
      Well, only then no longer id, but class - Heidel

    In general, in the end, the problem was solved using jQuery, because using its pseudo-class :nth-child even supports

     <script src="lib/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery("table.char td:nth-child(2n)").css({ "font-weight": "bold" }); jQuery("table.char td:eq(0), table.char td:eq(1), table.char td:eq(3)").css({ "width": "40mm" }); jQuery("table.char td:eq(2)").css({ "width": "35mm" }); }); </script>