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
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'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;
}
Is it not possible to style a <table> and its <tr> <td> using css classes?
For example:
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}
It is possible, it should work properly!
Here is an example
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div> and CSS!
As Aleks wrote, I would define css for the table itself too. But no nested brackets in css definition like: table.custom_class { ... td, th { ... } }.
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/
Yes, it's possible. What you have is working to some extent (with tweaks).
To style the td, use:
.calendar_table td {
}
Or:
.calendar_table tr td {
}
will also work.
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div> and <span>.
The answers above are either old, or not answered properly, as they are ignoring the styling of the table itself and not just td or th etc. elements.
If we would have a table like this:
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .css we should put:
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}
Table rows don't take padding, TDs do.
Change your style to:
.calendar_table td {
margin:0;
padding:4px;
}
Tables expand if necessary to let content fit
As far as I know, table rows do not have margin or padding
These layout rules apply no matter how you set it.
Nice looking green table theme :
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}