I have different tables in my page which should have different border, cellpadding etc. I can create many classes like,
.pad5 td {padding:5px}
and then using,
<table class="pad5">
But if I use 'table' is css, the style is applied to all tables. How can I achieve the result?
You can try to add an ID to each table and in css make reference with this ID like:
CSS & HTML:
#table1 tr td {
padding: 5px;
border: 4px solid #888;
}
#table2 tr td {
padding: 5px;
border: 4px solid red;
}
<table id="table1">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
<table id="table2">
<tr>
<td>first content</td>
<td>second content</td>
</tr>
</table>
declare classes for each type of styling you want to create, and assign to the <table> in the html via the class attribute
css
.table1 {
...
}
.table2 {
...
}
html
<table class="table1">
...
</table>
<table class="table2">
...
</table>
You can give your tables class names also
Example HTML:
<table class="mytable">
<tr>
<td>My cell</td>
</tr>
</table>
<table class="anothertable">
<tr>
<td>My cell</td>
</tr>
</table>
Example CSS:
.mytable {
border: 1px solid black;
}
.anothertable {
border: 1px solid red;
}
The first table will have a 1px solid black border and the second table will have a 1px solid red border.
I found that if I don't use table at all in CSS it works.
e.g.- .cell {border-spacing:10px}
give each of them seperate ids. classes are for css which will be applied to a bunch of different objects, ids are for css which will be applied to specific objects
<table id="first_table"></table>
Related
In section, I have declared that all tables should have 1px black border. However, later on a need comes up wherein I can use only bottom border for one specific table.
I created a separate class (table.botborder) and put border:0px in it to remove inheritance but its not working. In browser, I see outside border around the table. Can someone please help here how to I remove this outside border?
<!DOCTYPE html>
<head>
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
table.botborder table,th,td{
border:0px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="botborder">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
you're not using the CSS selectors correctly due to which the desired styles are not applying
<style>
table,th,td{
border:1px solid black;
border-collapse:collapse;
}
.botborder, .botborder tr, .botborder tr th, .botborder tr td{
border: 0;
}
.botborder tr td{
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<table class="botborder">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
Please check your CSS selectors. This should fix the issue for now:
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
.botborder, th, td{
border: none;
border-bottom: 1px solid #ddd;
}
</style>
How can I make the table cell border to be the same width even if I set that border twice? In the examples below you can zoom in and out from the code snippet and see that borders have different width because one was set twice and other just once. Is there a way to make the width to be the same?
table {
border-collapse: collapse;
}
td {
border-right: 1px solid black;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
<table>
<thead>
<tr>
<th>
123
</th>
<th>
123
</th>
<th>
123
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
Answer
The code you wrote is correct, I'm afraid the problem is the zoom of the web page set differently from 100%. It happened to me couple times and I managed to fix that doing this:
From the browser, try to reset the zoom of the web page to 100%
Let me know how it goes :)
just follow this code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style = "width:50%">
<tr>
<td>66,120</td>
<td>36,600</td>
</tr>
<tr>
<td>26,179</td>
<td>91,641</td>
</tr>
</table>
</body>
</html>
When using border-top with border-collapse, the last row of table becomes smaller in height by border-width / 2 pixels. For example, with 2px border, the last row is 1px smaller; with 10px border, it is 5px smaller and so on...
Why does this happen and how can I fix it?
/* Just for styling. Writes each cell's height in it. */
document.querySelectorAll('td')
.forEach((cell) => {
cell.innerHTML = cell.offsetHeight + "px";
});
table {
border-collapse: collapse;
}
.t1 tr {
border-top: solid 2px black;
}
.t2 tr {
border-top: solid 100px black;
}
/* Just for styling */
td {
padding: 12px 40px;
color: white;
}
<h2>2px border</h2>
<table class="t1">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
<h2>100px border</h2>
<table class="t2">
<tr style="background: cornflowerblue">
<td></td>
</tr>
<tr style="background: brown">
<td></td>
</tr>
<tr style="background: olive">
<td></td>
</tr>
</table>
Update
The problem shows itself when you want to sort columns.
In a normal, static table, that 1px isn't a huge deal; nobody will notice it. But when you want to change the order of rows (by sorting), there is a "jump".
There aren't any attributes like CellPadding or CellSpacing that will accomplish this for me and when I try to add css to the grid tr's to change the top and bottom margins, they are ignored. How do I add a little bit of spacing between each generated row from the gridview?
Margin doesn't work on table elements, use padding, or like in below sample, set a top and/or bottom border on your tr
table {
border-collapse: collapse;
}
td {
background: gray;
}
tr {
border: 0px solid white;
border-width: 10px 0;
}
<table>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
<tr>
<td>
Hello there
</td>
</tr>
</table>
You can also achieve this using
border-collapse: separate;
border-spacing: 0 10px;
Snippet
table.grey-theme {
border-collapse: separate;
border-spacing: 0 10px;
margin: 50px;
}
table.grey-theme td {
border: solid #777 1px;
padding: 5px;
}
<table class="grey-theme">
<tr>
<td>Dogs</td>
<td>10</td>
</tr>
<tr>
<td>Cats</td>
<td>20</td>
</tr>
<tr>
<td>Parrots</td>
<td>30</td>
</tr>
</table>
Use it in asp:GridView like
<asp:GridView ID="PetGrid" runat="server" CssClass="grey-theme">
Firefox does not render table cell borders correctly when a table has an empty tbody.
But if you use the pseudo selector tbody:empty {display:none;} to hide the tbody element, everything is rendered as expected.
jsfiddle
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.fixed tbody:empty {
display: none;
}
<table class="broken">
<thead>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
<hr />
<table class="fixed">
<thead>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>1</th>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
It most likely belongs to Bug 409254 and Bug 217769 on Firefox.
Side note: Although an empty tbody is valid in HTML 5, but the number of the cells in each row group should be matched (except using colspan) in one table.
A workaround would be drawing the borders separately on both the table and cell elements.
table {
border-collapse: separate; /*changed from collapse*/
border-spacing: 0;
border: 1px solid;
border-width: 0 0 1px 1px; /*draw bottom and left borders*/
}
th,
td {
border: 1px solid;
border-width: 1px 1px 0 0; /*draw top and right borders*/
}
jsfiddle