i'm having hard time for a pretty silly simple task
i need to add a border 1px on evey row, bu the first one...adding border to TR doesnt seem to work...
<div id="container1">
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</table>
</div>
<div id="container2">
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
</table>
</div>
try this:
td { border:1px solid black}
tr:first-child > td { border:none;}
Note: in the title you say that you want to set a border to the td-s and in the question you say that you want to set a border to every row (a.k.a. tr). My examples set a border on the tr-s.
I hope one of these meets your needs:
tr:not(:first-child) {
border: 1px solid red;
}
tr {
border: 1px solid red;
}
#container1 tr:first-child {
border: inherit;
}
Related
I want to override the style of a TD with a background colour.
My problem is that I have (mechanically) generated table which puts a CLASS on all TR for Zebra Stripes.
So I have
<table>
<tbody>
<tr class="myTROdd">...
<tr class="myTREven">...
<td class="myBackRed">Highlight this cell</td>
My CSS knowledge is weak, but as I understand it
.myBackRed {background-color: #FF0000;}
is less specific, so does not work.
.myTREven TD.myBackRed {background-color: #FF0000;}
is specific and does work, but I want something more generic, for example I tried this (which doesn't work)
.TABLE TD.myBackRed {background-color: #FF0000;}
The problem I have with
.myTREven TD.myBackRed {background-color: #FF0000;}
is that the actual CMS Template is
<tr class="my{TAG}TROdd">...
where {TAG} is substituted with any one of a large number of optional "Adjustment" values, and I am trying to avoid having to code every possible combination in style sheet for my cell-override style
Example of the Fiddle, below with TD override style for rows 3-4, no explicit override CSS for rows 5-6
https://jsfiddle.net/dB93J/1240/
This question comes close, but doesn't solve my problem.
EDIT: As per #Roberrrt comment I've changed
.TABLE TD.myBackRed {background-color: #FF0000;}
to
TABLE TD.myBackRed {background-color: #FF0000;}
and that does indeed seem to override the cell regardless of the variation to the TR class. See new fiddle https://jsfiddle.net/dB93J/1247/
If the understanding about your issue is correct. This is the possible answer for your problem. At first I select the class name of this TR tag with a class="myBackYellowTREeven" and TD tag with a class="myBackYellowTROdd". Below, is my solution...
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
/* NOTE myTROdd is not defined */
.myTREven,.myTREven TD
{
background-color:#f1f1f1
}
.myBackYellowTROdd
,.myBackYellowTROdd TD
{
background-color: #fffccc;
}
.myBackYellowTREven
,.myBackYellowTREven TD
{
background-color: #fff799;
}
/* .myBackRed */ /* This is what I would like to define! ... */
/* , .myBackRed TD */ /* ... or this even ... */
/* , .TABLE TD.myBackRed */ /* ... or EVEN THIS */
.myTREven TD.myBackRed
, .myTROdd TD.myBackRed /* In case myTROdd defined in future */
/* , .myBackYellowTROdd TD.myBackRed */ /* Do I really need this for EVER possible TR style? */
/* , .myBackYellowTREven TD.myBackRed */ /* DITTO */
{
background-color: #FF0000
}
/* MY SOLUTION */
tr.myBackYellowTREven td.myBackRed,
tr.myBackYellowTROdd td.myBackRed {
background-color: #FF0000}
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr class="myTROdd">
<td>Jason Thompson</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>Normal ODD Row</td>
</tr>
<tr class="myTREven">
<td>Fred Bloggs</td>
<td>PF</td>
<td>5'7"</td>
<td>01-08-1988</td>
<td>Normal EVEN Row</td>
</tr>
<tr class="myTROdd">
<td>DeMarcus Cousins</td>
<td>C</td>
<td class="myBackRed">6'11"</td>
<td>08-13-1990</td>
<td>ODD Row with Red cell</td>
</tr>
<tr class="myTREven">
<td>Isaiah Thomas</td>
<td>PG</td>
<td class="myBackRed">5'9"</td>
<td>02-07-1989</td>
<td>EVEN Row with Red cell</td>
</tr>
<tr class="myBackYellowTROdd">
<td>Ben McLemore</td>
<td>SG</td>
<td class="myBackRed">6'5"</td>
<td>02-11-1993</td>
<td>Yellow ODD Row
- Red cell missing</td>
</tr>
<tr class="myBackYellowTREven">
<td>Marcus Thornton</td>
<td>SG</td>
<td class="myBackRed">6'4"</td>
<td>05-05-1987</td>
<td>Yellow EVEN Row
- Red cell missing</td>
</tr>
</tbody>
</table>
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
I have a gridview and I'm trying to add empty space between each row using CSS.
This doesn't work:
#gridview tr{
margin-bottom: 10px;
}
Neither does this:
#gridview td{
margin-bottom: 10px;
}
Messing with "border-collapse" does nothing as well.
Anyone know how to add spacing?
Margin will not work in table elements you should use border or padding like the following snippet
table.grid
{
border-collapse: collapse;
}
table.grid tr
{
border: 0px solid white;
border-width: 20px 0;
}
<table class="grid ">
<tr>
<td>
Row 1
</td>
</tr>
<tr>
<td>
Row 2
</td>
</tr>
</table>
You can use it in GridView like this:
<asp:GridView ID="PetGrid" runat="server" CssClass="grid">
use padding:
#gridview td{
padding-bottom: 10px;
}
Use padding in th and td,
th, td {
padding: 15px;
}
Try this
table td {
border-bottom: solid 20px transparent;
}
<table>
<tr>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
</tr>
</table>
Which gridview are you using? try "inspect element" on the grid row and check from which .css class the style is getting inherited. try changing some parameters like padding/row height and observe if that works and make the change in the grid's library css or ovverride it with custom class.
#gridview tr{
{
height: 18px;text-align: left;font-weight: bold;color:white;padding: 5px 6px 2px;border-bottom: 2px solid #666666;white-space: nowrap;
}
In specifications margin are ignored for table cells: Link
Try to use padding
#gridview td{
padding-bottom: 10px;
}
I have a table with two columns. The width of the 2 columns are set and should not be modified. The first column contains 2 spans standing side by side. The content of the first span has a variable length. The second span also. What I would like to do is to hide the overflow of the second span when the content hits the border. I tried several things but I do not manage to find a solution. Hope someone can help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/eAN3d
My HTML:
<table>
<tr>
<th>th1</th>
<th>th2</th>
</tr>
<tr>
<td>
<span>Paul</span>
<span class="hide-overflow">Some text with no overflow</span>
</td>
<td>txt</td>
</tr>
<tr>
<td>
<span>Emmanuelle</span>
<span class="hide-overflow">The overflow of this text string has to be hidden.The td has to be only one line and the width should not be extended.</span>
</td>
<td>txt</td>
</tr>
</table>
My CSS:
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;}
th,td{
border:1px solid black;}
td:first-child{
width:350px;}
td:last-child{
width:50px;}
.hide-overflow{
background-color:yellow;
}
I'm not incredibly happy with this, but it does seem to work in Firefox. jsFiddle
table{
width:400px;
border-spacing: 0px;
border-collapse: collapse;
table-layout:fixed;
}
th,td {
border:1px solid black;
white-space: nowrap;
}
th:first-child, td:first-child{
width:350px;
overflow:hidden;
}
th:last-child, td:last-child{
width:50px;
}
.hide-overflow{
background-color:yellow;
}
span.hide-overflow {
white-space:nowrap;
}
This is the result:
I want to hide border of cell of a table .
How to do it using css ?
As it shows, I need to hide the marked borders (as in third and second rows).
<style>
table {
border: 1px solid black;
width:100%;
}
table tr {
border: 1px solid black;
}
table th {
border: none;
}
</style>
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
</thead>
See here: http://jsfiddle.net/AhHFP/
try this
border-collapse:collapse;
try
td.col1
{
border-left:0px;
}
try this.
table {
border: 1px solid black;
width:100%;
border-collapse:collapse;
}
i'm assuming thats a table? without markup, its kinda hard but set your table to table{border-collapse: collapse;}
http://reference.sitepoint.com/css/border-collapse