I have two tables in one page. I want to border around one of them and no border on the other one. So I am using the id="". But it is still putting borders around both tables and I am not sure why. If I change table1 for no border, it will take away the border on both tables. Please give me any helpful link or advice. Thanks.
table
{
border-collapse: collapse;
}
#table1 td, tr
{
text-align:center;
border: 1px solid black;
}
#table1 th
{
background: orange;
}
#table2
{
margin:auto;
}
<table id = "table1">
<th> Header </th>
<tr>
<td>row 1</td>
</tr>
</table>
<table id = "table2">
<th> Header </th>
<tr>
<td>row 1</td>
</tr>
</table>
You have to change your selector at #table1 td, tr.
#table1 td will apply to all td in #table1, but tr will apply for all tr.
So set it to #table1 td, #table1 tr and it works.
#table1 td, #table1 tr
{
text-align:center;
border: 1px solid black;
}
Example
Related
I am taking an online course and learning javascript, html5 and CSS. I am having an issue with getting my table to be formatted with my css file. It is inside a DIV tag:
<div data-role="main" class="ui-content">
I am trying to do with my CSS:
table th, td { border: 1px solid black;}
And I tried doing .ui-content table th, td {} and nothing and I tried a few others, but I am still stuck with it. Any help would be greatly appreciated. Thanks
When have space between element you are targeting children of that element while when you have commas you are targeting multiple elements.
In your case to be able to apply a border to the th, td and table you would need to do:
table, th, td { border: 1px solid black;}
But if you want to apply the css to the th and td inside of a table element you would need to do
table td { border: 1px solid black;}
table th { border: 1px solid black;}
With the html you have
<div data-role="main" class="ui-content">
<table>
<tr>
<th>Grade</th>
<th>Numeric Equivalent</th>
<th>Explanation</th>
</tr>
<tr>
<td>A</td>
<td>95-100</td>
<td><strong>Excellent.</strong></td>
</tr>
</table>
</div>
Your css should be
table { border-collapse: collapse; }
table th { border: 1px solid black; }
table td { border: 1px solid black; }
Here's vary basic sample, now may be tell what's the problem
table, th, td { border: 1px solid black;}
<table>
<tr>
<th>
Header 1
</th>
<th>
Header 2
</th>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
</table>
I am trying to figure out how to add border only inside the table. When I do:
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
The border is around the whole table and also between table cells. What I want to achieve is to have border only inside the table around table cells (without outer border around the table).
Here is markup I'm using for tables (even though I think that is not important):
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
And here are some basic styles I apply to most of my tables:
table {
border-collapse: collapse;
border-spacing: 0;
}
If you are doing what I believe you are trying to do, you'll need something a little more like this:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
jsFiddle Demo
The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.
EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.
this works for me:
table {
border-collapse: collapse;
border-style: hidden;
}
table td, table th {
border: 1px solid black;
}
view example ...
tested in FF 3.6 and Chromium 5.0, IE lacks support; from W3C:
Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.
Example of a very simple way for you to achieve the desired effect:
<table border="1" frame="void" rules="all">
<tr>
<td>1111</td>
<td>2222</td>
<td>3333</td>
</tr>
<tr>
<td>4444</td>
<td>5555</td>
<td>6666</td>
</tr>
</table>
For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
For IE 7 support, add this:
tr + tr > td,
tr + tr > th { border-top: 1px solid; }
A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE
Due to mantain compatibility with ie7, ie8 I suggest using first-child and not last-child to doing this:
table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}
table tr td:first-child{border-left:0;}
table tr:first-child td{border-top:0;}
You can learn about CSS 2.1 Pseudo-classes at:
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
this should work:
table {
border:0;
}
table td, table th {
border: 1px solid black;
border-collapse: collapse;
}
edit:
i just tried it, no table border. but if i set a table border it is eliminated by the border-collapse.
this is the testfile:
<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
}
table {
border: 0;
}
table td, table th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Cell (1,1)</td>
<td>Cell (1,2)</td>
</tr>
<tr>
<td>Cell (2,1)</td>
<td>Cell (2,2)</td>
</tr>
<tr>
<td>Cell (3,1)</td>
<td>Cell (3,2)</td>
</tr>
</table>
</body>
</html>
that will do it all without css
<TABLE BORDER=1 RULES=ALL FRAME=VOID>
code from: HTML CODE TUTORIAL
Works for any combination of tbody/thead/tfoot and td/th
table.inner-border {
border-collapse: collapse;
border-spacing: 0;
}
table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
border-right: 0;
}
table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
border-bottom: 0;
}
<table class="inner-border">
<thead>
<tr>
<th>head1,1</th>
<td>head1,2</td>
<td>head1,3</td>
</tr>
<tr>
<td>head2,1</td>
<td>head2,2</td>
<th>head2,3</th>
</tr>
</thead>
<tr>
<td>1,1</td>
<th>1,2</th>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
<thead>
<tr>
<th>foot1,1</th>
<td>foot1,2</td>
<td>foot1,3</td>
</tr>
<tr>
<td>foot2,1</td>
<th>foot2,2</th>
<th>foot2,3</th>
</tr>
</thead>
</table>
Add the border to each cell with this:
table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }
Remove the top border from all the cells in the first row:
table > tbody > tr:first-child > td { border-top: 0; }
Remove the left border from the cells in the first column:
table > tbody > tr > td:first-child { border-left: 0; }
Remove the right border from the cells in the last column:
table > tbody > tr > td:last-child { border-right: 0; }
Remove the bottom border from the cells in the last row:
table > tbody > tr:last-child > td { border-bottom: 0; }
http://jsfiddle.net/hzru0ytx/
This should work:
HTML:
<table frame="void" rules="all">
CSS:
td, th {
border: 1px solid red;
}
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
I have Googled and read a few articles on SO. Unfortunately explicitly setting borders on nested tables is not an option - I am positive I have done this before using border-collapse: collapse
Maybe I imagined the whole thing. I have the following CSS:
.table-grid {
width: 100%;
}
.table-grid > thead > tr > th,
.table-grid > tbody > tr > th,
.table-grid > tfoot > tr > th,
.table-grid > thead > tr > td,
.table-grid > tbody > tr > td,
.table-grid > tfoot > tr > td {
border: 1px solid red;
border-collapse: collapse;
}
Red borders still doubling up, tripling up, etc...what am I missing? Or misunderstanding?
This is for the UI of rather complicated scheduling tool for CNC machines - so DIV's are not required - I need it done using tables.
Anyway ideas?
EDIT | Markup below
<table class="table-grid" style="background-color: #fff">
<tr>
<th>Month
<table class="table-grid">
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</table>
</th>
</tr>
This is somewhat trivialized - otherwise id' just keep the the Month as a colspan"7" - the actual scope is far more complicated - so colspan techniques won't suffice
border-collapse: collapse; must be applied to the table for it to take effect, rather than the table cells. However, border-collapse only works on table cells (<td> or <th>) that share a common parent <table>. This means that you cannot merge cells of nested tables, nor can you merge elements that aren't <td> or <th> elements.
In your example this becomes a bit tricky being that all tables, including the nested ones, share the same single class.
With a little creative CSS, we can hide the bottom and left borders from all our nested cells. Additionally, we'll have to remove the right border of the last cell in a row.
Using a combination of the nested selector .table-grid .table-grid, as well as :last-child for altering the final cell of a nested row, you can come up with an infinitely "nestable" example that looks something like this:
.table-grid {
width: 100%;
border-collapse: collapse;
}
.table-grid>tbody>tr>th {
padding: 0;
}
.table-grid>thead>tr>th,
.table-grid>tbody>tr>th,
.table-grid>tfoot>tr>th,
.table-grid>thead>tr>td,
.table-grid>tbody>tr>td,
.table-grid>tfoot>tr>td {
border: 1px solid red;
}
.table-grid .table-grid td,
.table-grid .table-grid th {
border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 0;
border-left: 0;
}
.table-grid .table-grid td:last-child,
.table-grid .table-grid th:last-child {
border-right: 0;
}
<table class="table-grid" style="background-color: #fff">
<tr>
<th>Month
<table class="table-grid">
<tr>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
</tr>
</table>
</th>
</tr>
</table>
what you also can do is add this styling to the child table
width: calc(100% + 2px);
border-collapse: collapse;
border: none;
margin-left: -1px;
In a single page am having multiple tables but only for a set of tables want to apply css not for all. which for table bgcolor, th color, border color and text color.So I tried to create a separate class .mytable and applied which is not working but if I make that .mytable to table it comes for all the tables.Please help me to solve this.Thanks in Advance.
jsFiddle Link is Here
<style>
.mytable td th //instead of .mytable table it works
{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table> /// no need of this css
</table>
Rewrite this .mytable td th as .mytable td, .mytable th
Here: http://jsfiddle.net/y8B2j/1/
Try this
.mytable td, .mytable th
{
border:1px solid green;
}
DEMO
I cant see any problem in above code, but you can try identifier instead of class by denoting it as '#mytable'.
Just give it a try.
th selects every <th>-element.
.mytable td th selects all <th>-elements inside <td>-elements inside an element, that has class mytable.
I think what you need is this:
/* td & th elements inside 'mytable' */
.mytable td, .mytable th
{
border:1px solid green;
}
/* th elements inside 'mytable' */
.mytable th
{
background-color:green;
color:white;
}
<style>
.mytable td th
{
border:1px solid green;
}
.mytable th
{
background-color:green;
color:white;
}
</style>
<table class="mytable">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
</table>
It's because, you write wrong CSS Rule :
Your css rule : .mytable td th refers to inner th tag into table columns .mytable td.
So, If you want apply your css style for both th and td. You need to write this one:
.mytable td, .mytable th
{
border:1px solid green;
}
Try in fiddle
As i seen your code you using th as a child tag of td but th not child tag of td so use below code
Click here for fiddle
.mytable th
{
border:1px solid green;
}
Please add these lines on top of your Css file
tr{ background:#00CC66;}
th{ background:#ccCC66; border:1px dashed #0066FF;}
td{ background:#ffCC66;}
color:#fff;
Access like this:
.mytable td, .mytable th (It changes the property for all td and th nested inside the .mytable)
OR
If you have seperate class inside the mytable means
HTML
<div class="mytable">
<div class="data">
<ol>
...
</ol>
</div>
</div>
CSS
.mytable.data ol //Accessing the child ol