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>
Related
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>
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
Let's say I've a list of data in table.
Is there any way to achieve the below format using CSS?
I tried the below CSS but not the correct one:
table tr td:nth-child(2){ border-top: solid 1px #ccc; }
Here's my example
https://codepen.io/w3nta1/pen/QrzVgb
You could give a try to extend the border via an absolute pseudo element:
table {
border: none;
border-spacing:0;
width:200px;
overflow:hidden;/* hide pseudo overflowing */
}
table tr td + td {
border-top: solid 1px #ccc;
position:relative;/* make it the coordonates reference for the absolute positionned pseudo */
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;/* climb up the size of parent's border */
border-top: inherit;/* draw same border */
}
<table>
<tbody>
<tr>
<td>01</td>
<td rowspan="3">ABC</td>
</tr>
<tr>
<td>02</td>
</tr>
<tr>
<td>03</td>
</tr>
<tr>
<td>04</td>
<td>DEF</td>
</tr>
<tr>
<td>05</td>
<td>GHI</td>
</tr>
<tr>
<td>06</td>
<td rowspan="2">JKL</td>
</tr>
<tr>
<td>07</td>
</tr>
<tr>
<td>08</td>
<td>MNO</td>
</tr>
<tr>
<td>09</td>
<td>PQR</td>
</tr>
<tr>
<td>10</td>
<td rowspan="2">STU</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>VWX</td>
</tr>
<tr>
<td>13</td>
<td>YZ</td>
</tr>
</tbody>
</table>
https://codepen.io/gc-nomade/pen/wjRYqg
you can use only this css for look like you want table
table tr td + td {
border-top: solid 1px #ccc;
position:relative;
}
table tr td + td:before {
content:'';
position:absolute;
width:100%;
right:100%;
top:-1px;
border-top: solid 1px #ccc;
}
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>
As you can see in this fiddle, http://jsfiddle.net/S8Bne/64/, I am trying to draw a box shadow around the table (just the outside out it). The approach that I've taken is to create a div with slightly larger height than the thead area and give it a box shadow. However, I can't quite get it positioned properly. How can I do so?
Any solutions are welcome.
This is happening because your thead is not inside the div.
I added some height to the div to show...
Problem: http://jsfiddle.net/jasongennaro/S8Bne/54/
Add this
-webkit-box-shadow:#8A0000 2px 2px 10px;
box-shadow:#8A0000 2px 2px 10px;
to
.geniusPicks table tr#picksHeading th
And it works.
Working Example: http://jsfiddle.net/jasongennaro/S8Bne/55/
So no need for the div
If you want to add shadow to thead without using div, try the following code
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
table thead{
display:block;
position:relative;
box-shadow: 0px 1px 3px 0px #cccccc;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
table tr{
display:table;
table-layout:fixed;
width:100%;
}
<table>
<thead>
<tr>
<th>Company</th>
<th>Owner</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfred Trading</td>
<td>Alfred Thomas</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Australia</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helena Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus</td>
<td>John Cook</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>