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.
Related
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
I'm working with AEM CMS and the user can build a table in a rich text editor. It works pretty well. Our implementation also uses bootstrap 3.1. Bootstrap sets td and th padding to 0. This takes precedence over the cellpadding set by the system based on the user's settings for the table compoonent. The generated HTML looks like this. The users' setting for cell padding was set to 4 in this example...
<div class="parbase table">
<table width="100%" cellspacing="0" cellpadding="4" border="1">
<tbody>
<tr><td>Hello 1</td>
<td>Hello2</td>
<td>Hello3 </td>
</tr>
<tr>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
<td>adfbsk ik</td>
<td>lsdvn dfijkn jsdvoi m orijojnl JDFIUJ</td>
</tr>
</tbody>
</table>
</div>
Using Chrome Inspect Element I can see the Bootstrap rule is applied. When I uncheck this rule the table cellpadding takes effect, and the td's look good.
td, th {
padding: 0;
}
I've tried to remove the rule using initial and unset, but neither worked.
td, th {
padding: initial; /* and unset */
}
I'm hoping there's a css solution that doesn't involved changing the implementation of the component code generating the table html. Also, since we use a CDN for the bootstrap css/js, I don't want to customize the framework either.
Hopefully there's a CSS solution such that the bootstrap td and th padding rule can be unset/removed/deleted/etc.
You could try adding a more specific rule, which if I'm not mistaken will take priority over any less specific rule:
div.parbase td {
padding: 4px;
}
If this works, you can take out the cellpadding property of the table.
I suggest using jQuery cssText function:
$("td, th").css("cssText", "padding: 0 !important;");
This will override the rule after it.
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'm building a simple website for a friend of mine using wordpress. In a page I now want to make a simple rectangle and put some info in it. Since I learned html back in the 90's I still use a table (with one td) to do this. Since I want the table border to disappear I created the table like so:
<table border="0">
<tr><td>some content</td></tr>
</table>
Unfortunately, the border still appears (see here for the page I work on).
Does anybody know how I can get rid of this table border?
You are having this rule in your stylesheet style.css Line 1071 which needs to be removed
th, td, table {
border: 1px solid #DDDDDD;
}
Note: This is an element selector, will apply to all the tables in your website.
You've that table inside a div with class post-entry so better you can override the styles using the below selector
.post-entry * { /* '*' will select all element inside .post-entry so be cautious */
border: 0 !important;
}
And if you are having post-entry for other elements too, explicitly specify the elements instead of using *
.post-entry table, .post-entry th, .post-entry td {
border: 0;
}
Tip : Use firebug, will save you from asking less questions and wasting less time in debugging your CSS, HTML and JS
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/