HTML table border width to be the same - css

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>

Related

How to un-inherit CSS border property?

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>

css table last row is smaller when using border

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".

using two css styles for table td

Here's what I want to do (simplified example):
<table>
<tr>
<td style = "border:2px solid green">stuff1 </td>
<td style = "border:2px solid green">stuff2 </td>
<td style = "border:2px solid green">stuff3 </td>
</tr>
<tr>
<td style = "border:1px solid red">stuff4 </td>
<td style = "border:1px solid red">stuff5 </td>
<td style = "border:1px solid red">stuff6</td>
This gives precisely the right result, one row bordered in green, the next in red, but I'd like to get rid of all those "style" statements.
I tried several ways to cascade css for this, but couldn't figure out one that would work. The closest I got was:
<head>
<style>
.test {
font-size: 15px;
}
.test td {
border: 2px solid green
}
.test td a{
border: 1px solid red
}
</style>
</head>
<body>
<table class = "test">
<tr>
<td>stuff1 </td>
<td>stuff2 </td>
<td>stuff3 </td>
</tr>
<tr>
<td><a>stuff4</a> </td>
<td><a>stuff5</a> </td>
<td><a>stuff6</a> </td>
</tr>
</table>
</body>
This almost worked. The top row was bordered in green. But the bottom row was bordered in both red and green.
Could someone explain to me how to set up my css so that I can get the result I want.
**************Well, I found a solution using .test th { for the second color. But this does not solve anything if I want a third color.
You can just add a class to the second set of tds. See below for the code or check the Codepen for a working example.
<html>
<head>
<style>
.test {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border: 1px solid red;
}
</style>
</head>
<body>
<table class="test">
<tr>
<td>stuff1</td>
<td>stuff2</td>
<td>stuff3</td>
</tr>
<tr>
<td class="red">stuff4</td>
<td class="red">stuff5</td>
<td class="red">stuff6</td>
</tr>
</table>
</body>
</html>
Codepen: https://codepen.io/anon/pen/NzygNV
you can do like this as well, Like keeping css classes in a separate css file and then just adding a link tag pointing towards the css file in the html where you have your table.Refer link below for same.
.tbl {
font-size: 15px;
}
td {
border: 2px solid green;
}
td.red {
border:1px solid red;
}
<html>
<head>
<!-- you can ad link to css here -->
</head>
<body>
<table class="tbl">
<tr>
<td>column1</td>
<td>column2</td>
<td>column3</td>
</tr>
<tr>
<td class="red">data1</td>
<td class="red">data2</td>
<td class="red">data3</td>
</tr>
</table>
</body>
</html>
https://codepen.io/anon/pen/PaQJNK

How to have different table styles in CSS

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>

Nested tables: 1px border with css

I'm trying to create a table with a 1px black border.
I have to nest a table in the main table, and get "thick" borders where the next table butts against its enclosing <td>. I just want a 1px border everywhere.
I have this, in effect:
table.outer{border:1px black solid; border-collapse: collapse;}
td{border:1px black solid; border-collapse: collapse;}
table.nexted{border:1px black solid; border-collapse: collapse;}
If I understand you correctly, you can use border-left, border-right, border-top and border-bottom to create these "special" cases you want.
For instance, in your nested tables you can set
border-left:0;
to get a "resulting" 1 px border in the left side of the nested table.
give no border style for your nested table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table.outer
{
border: 1px black solid;
border-collapse: collapse;
width: 100%;
}
table.outer td
{
border: 1px black solid;
border-collapse: collapse;
}
table.nested, table.nested td
{
border-width: 0px;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<table class="outer">
<tr>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
<td>
content
</td>
</tr>
<tr>
<td>
content
</td>
<td>
<table class="nested">
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Just put the border attribute on the tds. If you want a 1px border throughout, that'll do it; you don't need it on the tables.
this page describes how to do it pretty well: http://www.visakopu.net/misc/table-border-css/
What's happening is that the borders on the cells are bumping up against each other, causing it to appear that there are thicker borders than there actually are. Instead of using the border-collapse property, you set a border on the table itself, and only on, say, the top and left sides, and you set borders on the lower and right sides for the cells.

Resources