Style the First <Td> Column of a Table Differently

Style the first td column of a table differently

You could use the n-th child selector.

to target the nth element you could then use:

td:nth-child(n) {  
  /* your stuff here */
}

(where n starts at 1)

CSS Table First Column Background

You should be able to achieve something similar by styling the row hover, then resetting the style with adjacent selectors:

tr:hover td {  background: green;}tr:hover td:first-child,tr td:first-child:hover ~ td {  background: transparent;}tr td:first-child:hover {  background: red;}

<table>  <tbody>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>    </tr>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>    </tr>    <tr>      <td>1</td>      <td>2</td>      <td>3</td>    </tr>      </tbody></table>

Style the first column of a table differently if there is no thead

Do like this, where you use the direct child selector >, first-child and :not()

table > *:first-child:not(thead) td:first-child {
  font-weight: bold;
}

Sample

table > *:first-child:not(thead) td:first-child {  font-weight: bold;}

<h2>Table with no header</h2><table>  <tbody>    <tr>      <td>First column - bold</td>      <td>Second column</td>    </tr>    <tr>      <td>First column - bold</td>      <td>Second column</td>    </tr>  </tbody></table>
<h2>Table with a header</h2><table>  <thead>    <tr>      <th>Header</th>      <th>Header</th>    </tr>  </thead>  <tbody>    <tr>      <td>First column - not bold</td>      <td>Second column</td>    </tr>    <tr>      <td>First column - not bold</td>      <td>Second column</td>    </tr>  </tbody></table>

CSS style for parent table first td in a nested table

You can assign the parent table a class name and use immediate child selector > as followings:

table,th,td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,td {
  padding: 5px;
}

.parent-table > tbody > tr > td:first-child {
/*                    ^^   ^^     */
/* Means 'first "td" child of first order "tr" children of ".parent-table" */
  width: 18%;
  background: red;
}

<table class="parent-table">
  <tr>
    <td>
      <label>Parent first td</label>
    </td>
    <td>
      <table>
        <tr>
          <td>Child first td</td>
          <td>Child second td</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Apply style to cells of first row

Use tr:first-child to take the first tr:

.category_table tr:first-child td {
    vertical-align: top;
}

If you have nested tables, and you don't want to apply styles to the inner rows, add some child selectors so only the top-level tds in the first top-level tr get the styles:

.category_table > tbody > tr:first-child > td {
    vertical-align: top;
}

Why is it different putting the width style in the first tds or the second in an html table / Why are these tables rendered differently?

That is the magic of 'table-layout: fixed'.

As specified in this link

The table-layout CSS property specifies the algorithm used to lay out cells, rows, and columns.

When the value is 'fixed': Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.

In your first case: As you specified the width for columns of first row. Rendering algorithm takes the width and renders it with that width. The extra 1px you see, is just the border width.

In Second Case: As there is no width for first row specified. It takes the table width and try to adjust the row columns in it. As for two columns there will be three borders, we left with the 97px to be divided among the two columns. As pixel cannot be divided into decimals, you get 48px and 49px width of columns. extra 1px is for the border width

CSS selector for first td in each column that is not empty

The way HTML tables are structured, there is no way in terms of CSS for a cell to know it is the nth cell in its column that matches or doesn't match a condition.

Ideally you would need something similar to :nth-child(An+B of sel), but for cells in a column (or for rows, depending on how you see it), since each cell element is a child of a row element and so :nth-child() won't be of any use. However :nth-column(), also from selectors-4, works rather differently. Furthermore, columns are an abstraction and so they don't match selectors anyway — only elements do.

Someone in the comments mentioned the lack of a parent selector being the reason why this isn't possible. Personally I'd like to see how they might accomplish this with such a feature, because I just don't see how it is even relevant to your problem. You're not trying to match the parent of a cell, a row, the tbody, the table, or whatever. You're trying to match cells, relative to their columns, not their parents/rows (something that the column combinator does but still not for your specific scenario). In fact, what I just said above explains precisely why this argument makes no sense.

The best you can do is to just count the number of columns in your table and loop through the cells finding the first ones in each column that are not empty. If the number of columns can vary, or you just don't want to hardcode everything, you will have to build your selectors programmatically (assuming you do end up using selectors somehow — there are a number of ways to approach this problem programmatically, but the point is just that: you have to do it programmatically).

How to style each table cell in a column via CSS?

Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each <td> in the table.

Caveats:

• Any row or cell styling will supersede column styling.
• The <col> tag only supports styling border, background, width and visibility (and their derivatives, such as background-color).
• The border declaration does not work unless the <table> has border-collapse: collapse;, and the behavior is inconsistent between browsers.
• The visibility declaration does not work properly in Chrome due to a known bug.

HTML table; How to format content within 2nd column to align all - except first element - to right and stretch 1st element to fill remaining width

the title of your question describes a typical flex behavior. You may use inside your table a flex container :

.flex {
  display: flex;
}

.flex-1 {
  flex-grow: 1;
}

<div id="ProjectSelector" width=1 00%>
  <table width="100%" style="padding-bottom: 10px;">
    <tr>
      <td style="white-space: nowrap; width:0;">Web Project (.csproj)</td>
      <td>
        <div class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></div>
      </td>
    </tr>
    <tr>
      <td>Root Namespace</td>
      <td>
        <div class="flex"><input id="rootnamespace" class="flex-1" /></div>
      </td>
    </tr>
    <tr>
      <td>Connection String</td>
      <td>
        <div class="flex">
          <select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></div>
      </td>
    </tr>
  </table>
</div>

---

Related Topics