i have a problem with html and css.
i have a html file with a css file attached and in the css file i have s.th. like:
table { background: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; margin: 0 0 18px; border: 1px solid #ddd; }
table thead, table tfoot { background: #f5f5f5; }
table thead tr th,
table tfoot tr th,
table tbody tr td,
table tr td,
table tfoot tr td { font-size: 12px; line-height: 18px; text-align: left; }
table thead tr th,
table tfoot tr td { padding: 8px 10px 9px; font-size: 14px; font-weight: bold; color: #222; }
table thead tr th:first-child, table tfoot tr td:first-child { border-left: none; }
table thead tr th:last-child, table tfoot tr td:last-child { border-right: none; }
table tbody tr.even,
table tbody tr.alt { background: #f9f9f9; }
table tbody tr:nth-child(even) { background: #f9f9f9; }
table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; }
that is a default theme. its nice for all the tables.
but now i want to add a standart non css formated table in my web project so i write:
<table> ... </table>
this table gets formated with the css. what can i do, to prevent this table getting formated with the css just showing it with the normal default style?
what can i do, to prevent this table getting formated with the css just showing it with the normal default style?
Change the selectors so they don't match the table.
There is no way to exclude an element from CSS rules if they have a selector that matches the element. If you can't prevent that in the first place then your only option is to write more rule-sets that apply different (specific) CSS to the element.
There is no "Reset to browser default" mechanism.
You will need to give each table a separate class and then style them separately.
For example your html could be
<table class="example1>
<tr>
<td>
</td>
</tr>
</table>
<table class="example2>
<tr>
<td>
</td>
</tr>
</table>
and your CSS could be
table.example1
{
YOUR CSS
}
table.example2
{
YOUR CSS
}
Your css is to generic. You might change it to use classes.
For example, ale tables change to
table.styled {your csss here}
And then in code where you want your styled table use:
<table class="styled"> ... </table>
You have to define a class for the tables that you don't want to have the default appearance. Then apply the class to the tables that you want. You have to rewrite the default css rules. If not, the default rules will affect your table.
Related
I have a really annoying and baffling problem. My website has two different classes of table. One has no border and the other does. But no matter what I do, I cannot separate the th and td styling from the other table.
The first table has no class styling; I default to whatever.
The second table has:
table.t01, th, td {
border: 4px solid black;
border-collapse: collapse;
}
However, this affects the styling of th and td for the first table. WTF.
How can I solve this problem?
By using commas in your selector, you're saying "this style applies to any table with class t01, but also ANY th and ANY td."
This can be useful to consolidate the styling of many elements that have the same style. For example, the following are equivalent:
// The verbose way
th { color: red; }
td { color: red; }
p.red { color: red; }
div#firstred { color: red; }
// The concise way
th, td, p.red, div#firstred { color: red; }
If what you really looking for is to define a style for th and td descendants of a table with class t01, just separate the terms of the table and th/td selectors with a space:
Try:
table.t01 th, table.t01 td {
border: 4px solid black;
border-collapse: collapse;
}
What happens if you apply the styling to your selectors more explicitly (see below):
table.t01, table.t01 th, table.t01 td {
border: 4px solid black;
border-collapse: collapse;
}
Here's another, slightly shorter alternative:
<style>
#myTable th, td {
border: 4px solid black;
border-collapse: collapse;
}
</style>
...
<table id="myTable">
...
</table>
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;
I want to use a bootstrap 3 table with borders, eg using class="table table-bordered", so that I'll have borders between cells, but I don't want any borders on the outsides of the table.
I tried the following, and it seems to work well for the sides, but I can't think of a nice way to handle the potential top and bottom borders considering that thead and tfoot are optional elements. I was hoping to make something robust that would account for these scenarios, maximizing resuse potential.
.table-bordered.no-outside-borders {
border: none;
}
.table-bordered.no-outside-borders>thead>tr>td:first-child,
.table-bordered.no-outside-borders>thead>tr>th:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tfoot>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>td:first-child,
.table-bordered.no-outside-borders>tbody>tr>th:first-child {
border-left: none;
}
.table-bordered.no-outside-borders>thead>tr>td:last-child,
.table-bordered.no-outside-borders>thead>tr>th:last-child,
.table-bordered.no-outside-borders>tfoot>tr>td:last-child,
.table-bordered.no-outside-borders>tfoot>tr>th:last-child,
.table-bordered.no-outside-borders>tbody>tr>td:last-child,
.table-bordered.no-outside-borders>tbody>tr>th:last-child {
border-right: none;
}
Is there a nice css solution here?
I had the same problem yesterday, the css code I used for this was:
.table-borderless tbody tr td, .table-borderless tbody tr th, .table-borderless thead tr th {
border: none;
max-height: 200px;
font-size: 20px;
border-right: 1px solid gray;
border-collapse: collapse;
}
.table.table-borderless {
border-right: 1px solid gray;
border-collapse: collapse;
max-height: 200px;
font-size: 20px;
}
So I am styling a table, and I'd like to make quite a fancy underline for the table headings.
I've though hard and had a look on the internet but couldn't find anything.
This is the table structure:
<table>
<thead>
<tr>
<td>Number</td>
<td>Name</td>
<td>Address</td>
</tr>
</thead>
<tbody></tbody>
</table>
And my current styling:
table {
width: 100%;
}
table thead {
font-weight: bold;
}
table thead td {
margin-right: 5px;
border-collapse: separate;
border-spacing: 10px 5px;
border-bottom: 2px solid #427AA8;
}
table tbody {
font-size: 90%;
}
table tbody tr {
line-height: 2em;
border-bottom: 1px solid #CCC;
}
table tbody td {
padding: 0 5px;
}
Here is a jsfiddle of the code: http://jsfiddle.net/tYA4e/1/
What I am looking for is a break in the border between the columns, but only in the thead.
And an example of what I am trying to achieve: http://i.imgur.com/OHrhJ.jpg
Is there a way to achieve this with some simple CSS?
A border will, necessarily, extend the full width of its element; therefore to extend a border only partially across the width of an element that border must be applied to a child element, sized accordingly.
That said, the only way this is achievable would seem to be with nesting an element within the td (in this case a span), and using the following CSS:
table thead td span {
display: inline-block;
width: 80%;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
As an aside, though, it's worth noting that, for table-headings, the th (table-heading) element might be more appropriate for your use in this case.
On further thought it is, of course, also possible to use styled hr elements, which allows you to give pixel-level control over the hr's width in that it can extend up to, in this example, 10px from the right edge of the parent td):
table thead td hr {
width: 80%;
margin: 0 10px 0 0;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
You could also use th for heading cells -> no more need for seperating the rows into groups with thead and tbody - less markup and less css.
<table>
<tr>
<th>headlinecell</th>
</tr>
<tr>
<td>contentcell</td>
</tr>
</table>
now just style the th and td.
is there any way to apply to a table cells' both the separate and the collapsed border properties to have collapsed but separated? Thanks
EDIT: this is the wanted result:
Perhaps
table {
border-spacing: 1px 0;
}
The closest I can get is:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border: 1px solid black;
}
Unfortunately, this will create a double-thick line between the rows. Negative values are not allowed in the border-spacing property, otherwise -1px would probably work.
You could make the other lines 2px wide if that is acceptable, then at least you wouldn't have differing border thicknesses:
table {
border-collapse: separate;
border-spacing: 4px 0;
}
table td, table th {
border-width: 1px 2px;
border-style: solid;
border-color: black;
}
table tr:first-child th,
table tr:first-child td {
border-top-width: 2px;
}
table tr:last-child th,
table tr:last-child td {
border-bottom-width: 2px;
}
This can be achieved without using extra div elements in the th & td cells. This solution works in Chrome, Firefox and IE8+.
CSS
table
{
border-collapse: separate;
border-spacing: 10px 0px;
}
td, th
{
padding: 10px;
border: 1px solid #000;
border-top: none;
}
table tr:first-child th
{
border-top: 1px solid #000;
}
Change table tr:first-child th to table tr:first-child td if the table's first row doesn't contain table header cells (TH).
See my jsfiddle here: Table with column spacing but collapsed row border
No, the border-collapse does not allow for separate defining of the horizontal and vertical. You can achieve it with extra markup (which, on a table, could end up being a lot of extra markup), so I don't advise it, but I will give the code for it:
Html:
<table>
<tr>
<th><div>Header 1</div></th>
<th><div>Header 2</div></th>
</tr>
<tr>
<td><div>Content 1</div></td>
<td><div>Content 2</div></td>
</tr>
<tr>
<td><div>Content 3</div></td>
<td><div>Content 4</div></td>
</tr>
</table>
And css:
table {border-collapse: collapse;}
th, td { border: 0; padding: 0;}
th div, td div {margin: 5px 0 0; border: 1px solid #ff0000; padding: 5px;}
Of course, you may want to use a class on the div or a child selector, some way of only targeting the div if you might have other div's in the table data. The margin controls your horizontal gap, and of course, your padding or border width can be whatever you want.
Is this what you're looking for?
table {
border: 1px solid black;
}
table td {
border: 1px solid red;
margin: 3px;
}
It doesn't use the border-collapse property, but it creates an outer table border with each <td> in its own separate border.