First visible td and last visible td in css

css visible selector
css first visible child

I am trying to style first and last visible td inside tr. I can acheive above with peice of jquery, but in my case need to handle many scenarios and testing will take time.

After lot of research, i could not get anything in css.

Is there any other simple hack or work around so that i can acheive only with css.

Below are few options, which i tried

.visible {
display : block;
}

.hidden {
display : none;
}

td:first-child {
}

td:last-child {
}

td.visible:first-child {
}

td.visible:last-child {
}

There is not in css move to backward,so we can't select td with class cant with pure css.

.hidden  {
  visibility: hidden;
}

.cant {
  background-color: orange!important;
}

tr td.hidden + td:not(.hidden) , tr td:not(.hidden):first-child { 
  background-color: red;
}

tr td.hidden + td:not(.hidden) ~ td , tr td:not(.hidden):first-child ~ td { 
  background-color: unset;
}

tr td:not(.hidden):last-child,tr td:not(.hidden):last-child {
  background-color: red!important;
}
<table border="1">
  <tr>
    <td class="hidden">This is TR1_TD1</td>
    <td>This is TR1_TD2</td>
    <td class="hidden">This is TR1_TD3</td>
    <td>This is TR1_TD4</td>
    <td>This is TR1_TD5</td>
  </tr>
 <tr>
    <td>This is TR2-TD1</td>
    <td class="hidden">This is TR2-TD2</td>
    <td class="hidden">This is TR2-TD3</td>
    <td class="cant">Can't with Pure Css</td>
    <td class="hidden">This is TR2-TD5</td>
  </tr>
</table>

First visible td and last visible td in css - css - html, I am trying to style first and last visible td inside tr. I can acheive above with peice of jquery, but in my case need to handle many scenarios and testing will take  Hi All, I have a table that displays more than 50 columns. User want to make first and last column fix. and apply scroll to the middle columns. Is anyone have idea, How can we do this?

If I get you correctly I'd say this is not achievable using pure CSS if your markup is dynamic at browser execution time with javascript.

If you have control over its generation process and your markup is dynamic at server execution time (PHP, Java, whatever...), you can add two more classes, .first-visible and .last-visible to the appropiate elements and style them in CSS.

CSS4 adds the necessary features to achieve this but its support it's still undefined: https://css4-selectors.com/selector/css4/structural-pseudo-class/

Are you able to add plain javascript instead of jQuery?

visibility, The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide <p class="visible">The first paragraph is visible. .collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; } Last modified: Nov 11, 2019 , by MDN contributors. You could always use a specific Print media style sheet and a Screen media style sheet with differing rules, etc. The table row and table data cell must be contained somewhere within the TABLE.

Im not completly sure if this is waht you are asking for but, here is my solution of how I would handle it:

When the document is loaded use jQuery to add a class to all the elements you want to handle.

$(document).ready(function(){
   $("elements to select").addClass("selected"); // to all the elements you 
     want to handle
});

Then in the css just use that class to edit the selected elements

.selected{
 // your code
}

Hide <tr> or <td> then show - HTML & CSS, if I hide a <tr> or <td> in regular stylesheet, how do I show it afterwards (in a <tr​> can't be displayed as a block level element and that is why display For the last table I didn't make a js code to change the class, I just put the two show*/ tr​#row3{line-height:normal;height:auto;overflow:visible;float:none;visibility:visible;}. The :last-child selector matches every element that is the last child of its parent. Tip: p:last-child is equal to p:nth-last-child (1). Browser Support. The numbers in the table specifies the first browser version that fully supports the selector. css declarations; Previous CSS Selectors Reference Next

This Stuff will work for you and i hope you will be glad to see it. You can see only First TD and Last TD is visible else are hidden.

table{
  border :1px solid #ddd;
}
//tr td{
//  display: none; // For Hide other TD
//}

tr td:first-child{
  color: darkgreen;
  display:block;
  background:lightgreen;
  padding:7px 15px;
  border-right:2px solid red;
}

tr td:last-child{
  color: skyblue;
  display:block;
  padding:7px 15px;
  background:blue;
  border-right:2px solid red;
}
<table>
  <tr>
   <td>This is first-child</td>
   <td>This is 2</td>
   <td>This is 3</td>
   <td>This is last-child</td>
  </tr>
  <tr>
   <td>one</td>
   <td>Two</td>
   <td>Three</td>
   <td>Four</td>
   <td>Five</td>
  </tr>
</table>

:last Selector, Because :last is a jQuery extension and not part of the CSS specification, :last to select elements, first select the elements using a pure CSS selector, then use  CSS-Tricks is hosted by Flywheel, the best WordPress hosting in the business, with a local development tool to match. ShopTalk is a podcast all about front-end web design and development. CSS-Tricks Presents 📅 Upcoming Front-End Conferences

:nth-last-child() Selector, For other selector expressions such as .first() or .eq() jQuery follows Given a single <ul> containing three <li> s, $( "li:nth-last-child(1)" ) selects the third, last, <​li> . Further discussion of this usage can be found in the W3C CSS specification. font-size:18px;. } #inner {. color: red;. } td {. width: 50px;. text-align: center;. }. The visibility property specifies whether or not an element is visible. Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout! yes. Read about animatable. JavaScript syntax: object .style.visibility="hidden" Try it. Browser Support.

row().child(), Each child row is typically contains a single cell, which has a colspan attribute set Create multiple child rows for a single row in the table - the first visible row.:. Yes it will do. You have to use the FindControl in the databinding event of the repeater so that you are only dealing with one row. IF the code you tried actually worked it would find 50 controls with id of TR1 (assuming 50 data items bound).

visibility, The visibility property in CSS has two different functions. It hides rows and Safari collapse a table cell (wrong) but Chrome will not (right). Because :last is a jQuery extension and not part of the CSS specification, queries using :last cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :last to select elements, first select the elements using a pure CSS selector, then use .filter(":last").

Comments
  • The appropriate CSS selector is dependent on the HTML, which you haven't yet shown; please: remember to share your minimal reproducible example.
  • Your code is working ... don't know where you are stuck
  • @DavidJorHpan my code will wprk perfectly only if all the td are visible. if i hide last column, style should get applied to the visible last column
  • need without jquery
  • you understood the problem wrongly. if i hide the last column, whatever is visible now in that last column style should get applied. (Hide columns in the grid, always apply some style to last column)
  • what exactly you want to do with first and last column?
  • Now you can see your first and last td border has been red.
  • see my example given above. and result also.
  • You said that , You want to set up right border red on first and last td on your row that why its should be like that. if you want something else, give description with image with highlight what you want as done.