CODEWITHSUNDEEP
css-tablestablecolumn
CraigF
CraigF

Reputation: 321

Increase width of first column in HTML/CSS table only

I have a basic table built from a table generator.

I need to increase the size of the first table column only. However the code below increases the first and fourth column.

CSS

    table.paleBlueRows {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #FFFFFF;
  width: 85%;
  height: 200px;
  text-align: center;
  border-collapse: collapse;
}
table.paleBlueRows td, table.paleBlueRows th {
  border: 1px solid #0B6FA4;
  padding: 3px 2px;

}
table.paleBlueRows tbody td {
  font-size: 13px;
}
table.paleBlueRows td:nth-child(even) {
  background: #D0E4F5;
}
table.paleBlueRows thead {
  background: #0B6FA4;
  border-bottom: 3px solid #FFFFFF;
}
table.paleBlueRows thead th {
  font-size: 17px;
  font-weight: bold;
  color: #FFFFFF;
  text-align: center;
  border-left: 2px solid #FFFFFF;
  border-TOP: 2px solid #FFFFFF;
}
table.paleBlueRows thead th:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

table.paleBlueRows tfoot td {
  font-size: 14px;
}

The below code controls the column width

}
table.paleBlueRows thead th:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

Can anyone assist with increasing the first column only?

Here is the CODEPEN

Upvotes: 4

Views: 9488

Answers (2)

Carlos Jafet Neto
Carlos Jafet Neto

Reputation: 891

What about just making those two changes:

Assign the #first id to your first row.

<th id="first" rowspan="2">Package</th>

Change the name of your table.paleBlueRows thead th:first-child to:

#first {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

Upvotes: 1

Pedro Martins
Pedro Martins

Reputation: 874

It is increasing the width of the 1st titled Package because you're using the CSS selector table.paleBlueRows thead th:first-child.

Although, the 4th column is also being affected because you have a rowspan and the column Each is also selected - it's the first column of the spanned row.

To fix this problem you can use the selector table.paleBlueRows td:first-child that affects only the 1st td element of your table row.

Replace:

table.paleBlueRows thead th:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

With:

table.paleBlueRows td:first-child {
  border-left: none;
  width: 8em;
  min-width: 8em;
  max-width: 8em;
}

Please check my reviewed pen: https://codepen.io/Rechousa/pen/mXXPwW

Upvotes: 7

Related Questions