Target table column with CSS

Question

I have a Wordpress theme with a scoreboard (5 of them in a row). For some reason the CSS I am using is targeting the bottom tables, but will not effect the column width of the first two.

The website is here: http://berlinbravesbaseball.de/tester/2016/04/16/berlin-braves-baseball-hat-eine-neue-webseite/

The CSS being used is:

 table > tbody > tr:first-child > td:first-child{width: 120px;}

 .execphpwidget{ vertical-align: top;}

.widget th, .widget td {
    padding: 0;
    table-layout: fixed;
}

.widget .sam-column1{
    width: 120px;
  }

.sam-table-fixer > tr:first-child > td:first-child{
     width: 120px;
}

Whatever I do, it affects all tables, but I cannot expand the width of the first column of the first tables. I need to target it specifically. What's going wrong?

Answer 1

Using colspan in tables prevents other width settings in other rows. Also, your default td width is set to 25%, but you have 5 cells in a row. All your CSS contradicts therefore. Additionally, you are using a fixed table layout, which makes the whole table use the widths of the first row (which doesn't have a layout due to the colspan).

To actually have the first cells in "normal" rows be 120px wide, use a colgroup declaration:

<colgroup>
  <col width="120">
  <col width="40">
  <col width="40">
  <col width="40">
  <col width="40">
</colgroup>