Using CSS How to Change Only The 2Nd Column of a Table

Using CSS how to change only the 2nd column of a table

You can use the :nth-child pseudo class like this:

.countTable table table td:nth-child(2)

Note though, this won't work in older browsers (or IE), you'll need to give the cells a class or use javascript in that case.

How do you select the second column in a table with CSS when there aren't two td's in each tr?

For that specific table in your post, you could do this:

table tr td:not([rowspan]) {
    border-bottom: 1px solid gray;
}

i.e. selecting every td which does not have a rowspan attribute.

For a more complex table (but still assuming the second column is the needed one and that the first column contains only double-row cells), you could do this:

table tr td:first-child[rowspan] + td, table tr td:first-child:not([rowspan]) {
    border-bottom: 1px solid gray;
}

Change the values of the 2nd column when a user clicks on the heading of the 2nd column of a table

This is a simple task using jquery.
First add id to the columns. The second heading column should be like this

Without jQuery

<th id="th2" onclick="changeVal()">2nd Heading</th>

    <script>
    function changeVal() {
    document.getElementById("th2").innerHTML = "3rd Heading";
    }
    </script>

With jQuery
This section has been updated. I added a data-state attribute the column head, so when you toggle values it will record the last change.

 <th id="th2" data-state="2">2nd Heading</th>

Add jquery code like this after linking a jquery file

<script type="javascript" src="path_to_jquery.js" />
 <script>
    $("#th2").click(function() {
    var state = $(this).attr("data-state");

    if(state=="2") {
    $(this).html("3rd Heading");
    $(this).attr("data-state", "3");
    } else if(state=="3") {
    $(this).html("2nd Heading");
    $(this).attr("data-state", "2");
    }
    });

//you can replace $(this) with $("#th2") or thr id of another element or table cell to manipulate the value inside
</script>

Try it out and give feedback

HTML Table: Set width for second column onwards using CSS

HTML tables don't really have "columns" - rows just have first cells, at least as far as markup is concerned. However, you could do something like with CSS selectors:

Given the following markup:

<table>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
  <tr><td>foo</td><td>bar</td><td>bar 2</td></tr>
</table>

CSS:

table tr td             { width: 20em; }
table tr td:first-child { width: 10em; }

This would set the width of the first "column" to 10em, and all other columns to 20em.

You might want to consider browser support for :first-child though. The alternative is adding a class to the first <td> in every <tr> (it appears to be supported by pretty well every major browser other than IE6).

Is it possible to select cells in the second column of an HTML table and move them to the bottom of the first column using CSS?

Change tables to divs/sections and use this sollution.

@EDIT

.parent-class {max-width: 600px;margin: 0 auto;overflow: hidden;}
.row {box-sizing: border-box;width: 200px;float: left;margin: 0;text-align: center;}
.row p {margin: 0;padding: 10px;border: 1px solid #888;}

<section class="parent-class">
 <section class="row">   <p>Item1</p>  <p>Item2</p>  <p>Item3</p>   </section>  <section class="row">   <p>Item4</p>  <p>Item5</p>  <p>Item6</p>   </section>  <section class="row">   <p>Item7</p>  <p>Item8</p>  <p>Item9</p>   </section> </section>

How do I make the second column of my tables wider?

you can set width for each and every <td> in your table if you want. but in this particular case, if you need to make only the 2nd <td> wider, we can achieve that just using CSS :nth-child() pseudo-class.

table tr td:nth-child(2) {
   width: 40%;
   // just change this matches to your requirement.
}

the thing to remember when you using :nth-child is that we should use it on the element, not to the parent element

or else you can simply set the width property on the element like below with the style attribute.

<td style="width: 40%">

update
working example

Relocate second column of table below first for mobile version

You can put the data in two different tables (one for the data on the left and one for the data on the right, otherwise exactly the same) and change the css for .TableOfReasons to this:

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}

then you need to add the html <meta> tag in the head:

  <meta name="viewport" content="width=device-width, initial-scale=1">

and then use this css to change them both to display: block; when the screen changes width;

@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

DEMO:

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="feature-title"><h4>Odours elimination</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Greenhouses</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Beekeeping</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Communal service</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Stimulation of animal<br>growth and prevention of infectious diseases</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>A the gym</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>

select nth column in a table

Two errors:

1. Your selector: #mytable is already a table and has no table child,
   
   so use only #mytable
2. The > in table > tr will not work since the browser adds tbody by default,
   
   therefore tr is an immediate child of tbody

#mytable{  width:100%;}#mytable td:nth-child(3) {  width: 600px; background:#eee;}

<table id="mytable">  <tr>    <td>1</td>    <td>2</td>    <td>3</td>  </tr>  <tr>    <td>1</td>    <td>2</td>    <td>3</td>  </tr></table>

CSS for hiding multiple columns in a table

CSS3:

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Use nth-child selector to un-hide the 2nd <td> of every row, effectively showing the 2nd column.

---

Related Topics