I wish to use the default bootstrap style ".table" for HTML table that I am creating for my webpage as per :
Bootstrap Link
However, I do not wish to add the horizontal separators, plus I also want the columns to be a little closer than they appear currently. Is there any CSS styling that I should use for this?
Basically, I wish to create an HTML table that has uniform column width, height and have some space between 2 rows for easy readability.
Any guidance would be appreciated, thank you in advance.
You have to add some css in your style :-
Remove horizontal separators :-
table td {
border-top: none !important;
}
and add table-condensed class for columns to be a little closer.
It may help you.
In order to override the table class, you need to create another class named borderless.
html:
<table class='table borderless'>
CSS :
.borderless tbody tr td, .borderless tbody tr th, .borderless thead tr th {
border: none;
}
I would suggest you to go for Bootstrap Grid system
Fiddle example: http://www.bootply.com/vZRIDaqaRm
Related
I want to make a table in a blazor razor component that has no visible borders at all. I am using it only to order elements.
For example, this is what a table with "border="0"" looks like (taken from the Wetaher service that the Blazor template in Visual Studio starts with):
I want to remove the lines between the rows and between the header and body of the table. I've tried "border="0" cellpadding="0" cellspacing="0"" but it does nothing.
In your default stylesheet file, you can create a custom css class that can override existing bootstrap class.
.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
border: 0;
}
How To:
<table class="table table-borderless"></table>
Note: use border: 0 !important; only if above change is not reflecting.
I've been using 'border = 1' in my HTML, which looks fine, but I realise it would be better to use CSS, so I created a basic border class, like so...
.basicborder table, .basicborder th, .basicborder td {
border: 1px solid black;
}
The borders appear around the th and td's but not around the outside of the table itself. Have I done something wrong?
CSS looks fine to me, but you can better use:
table.basicborder, th.basicborder, td.basicborder{border: 1px solid black;}
So, the selector starts with the least specific selector (the HTML element, instead of the class).
But it should already work fine, if you have linked your HTML properly. Do your table, th and td elements have a class="basicborder" attribute each?
edit:
If i comprehend correctly, this would be the best solution.
You make a basic style for all 's with just table,td,th{ etc...
Then you add to the ones with a different style a class, lets stay differentborder.Now you make a CSS saying the following: table.differentborder, .differentborder td, .differentborder th{ your style }
This selects your tables with the class, and all td's an th's where a parent has the class differentborder.
For more fun with CSS selectors you can look on the W3Schools CSS Selector Reference
I have a table, let's say with 3 rows,
I want the first two to be aligned vertically to the top, and second one to be vertically aligned to the middle.
If I try to define:
td {vertical-align:top}
tr.middle {vertical-align:middle}
and in the html, assign class="middle" to the relevant <tr>,
it doesn't work, as the td definition would persist.
only way i've managed to do is is to define
td.top {vertical-align:top}
td.middle {vertical-align:middle}
and then assign the relevant class to every single td, which is too much code.
any way to do this with minimum code?
Simply do this, no need to edit your HTML or add classes.
tr:nth-child(1) td {vertical-align:top;}
tr:nth-child(2) td {vertical-align:middle;}
tr:nth-child(3) td {vertical-align:bottom;}
Demo http://jsfiddle.net/v68ao3pv/1
If you need IE8 support:
tr:first-child td {vertical-align:top;}
tr:first-child + tr td {vertical-align:middle;}
tr:first-child + tr + tr td {vertical-align:bottom;}
Demo http://jsfiddle.net/v68ao3pv/2/show
Yes, there is a way. You can use Descendant selectors. That means, you assign the class “top” to the first tr and the class “middle” to the second one and write in CSS:
.top td{vertical-align:top}
.middle td{vertical-align: middle}
// ↑
// THIS space is important.
So it selects all table cells within an element with the top/middle class. This is something very practical which you can use quite often.
More about CSS selectors on the website of the W3 Consortium.
Using your current CSS, make the .middle rule selector more specific:
td {vertical-align:top}
tr.middle td {vertical-align:middle}
In this case, all td will align to the top by default and the more specific selector will force all the cells in the .middle rows to align to the middle.
Doesn't get much more minimum than this Fiddle: http://jsfiddle.net/sqhxqdck/
Unless I'm misunderstanding your question, all you really need is:
tr.top {
vertical-align: top;
}
Due to the cascading nature of cascading style sheets.
I have the first row of a table styled as follows:
.Table1 tr:first-child td { ... }
I also want a hover style on part of this row, and I've tried these 2 as the next rule, but neither of them works:
.Table1 tr:first-child:hover td { ... }
.Table1 tr:first-child td:hover { ... }
They do both partially work - some td cells in the row have no content, and have a class of emptyColumn, and these cells do have the hover styling applied to them (but only if the styling is !important). However, the cells which do have text content are not styled.
From my (very) limited understanding of specificity, if the first rule actually works, then surely the second rule should also work, since it's more specific? Is there something else that could stop it working?
However, what I actually need is slightly different from this. I only want the hover to work on certain td cells in the tr, and I've given these cells a class of colHeaderButton:
td.setAttribute('class', 'colHeaderButton');
I can't find any way to apply the hover style using the class name - I've tried various combinations such as
.Table1.colHeaderButton tr:first-child td:hover { ... }
but I can't get any of these to work. Thanks.
The td is a member of the class, not the table.
.Table1 tr:first-child td.colHeaderButton:hover
I have HTML table in my webPage. I have applied css to that table.
now i want to change css only for first Row that is Table header.
i dont have th in table header, because the table is autogenerated from gridView
how can i achieve this ?
tr:first-child
Apply styles to that.
Consider using CSS pseudo class :first-child
Read this for details: http://www.w3schools.com/css/css_pseudo_classes.asp
If by "gridView" you're refering to the ASP.NET GridView control, you can use the ShowHeader property to have a th generated.
This will then allow you to hook into the th and will be more semantcially correct.
myGridControl.ShowHeader = true;
or
<asp:GridView ShowHeader="true" [...]>
Use the CSS pseudo class :first-child, for example:
table tbody tr:first-child
{
background-color: red;
}
http://jsfiddle.net/KvHsb/