I was wondering how to center this table? I'm having difficulties centering this. I've tried centering with CSS, but I may be doing something wrong when it comes to placing the tags in my CSS. I've tried the tags "table.tftable"
<style>
table {
-moz-border-radius: 5px !important;
border-collapse: collapse !important;
border: none !important;
}
table th, table td { border: none !important }
table th:first-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table th:last-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:last-child td:first-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:last-child td:last-child {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
table tr:hover td { background-color: #2f2f2f !important }
<table id="tfhover" class="tftable" border="1">
<style type="text/css">
table.tftable {font-size:12px;color:#fbfbfb;width:100%;border-width: 1px;border-color: #686767;border-collapse: collapse;text-align:center;}
table.tftable th {font-size:12px;background-color:#171515;border-width: 1px;padding: 8px;border-color: #686767;text-align:center;}
table.tftable tr {background-color:#000000;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-color: #686767;text-align:center;}
</style>
<table id="tfhover" class="tftable" border="1" style="width: 680px;">
bunch of content
</table>
To centre the table on the page, or if it is inside a container put it in the centre of that use this code:
table.tftable {
margin-right:auto;
margin-left:auto;
}
If the left and right margins are equal then compliant browsers should automatically assume that the element needs to be centre-aligned
Demo http://jsfiddle.net/uKyQu/
To center the table, You should add this line:
table.tftable { margin-left:auto; margin-right:auto;}
Related
I have added a slight box shadow to a table row when it is being hovered on so that it is a bit more apparent. It works as it should, but when I add alternating row colors, it stops displaying correctly.
Here is a JSFiddle of the problem.
<div class="search-table">
<table>
<tbody>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr class="alt">
<td>B1</td>
<td>B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
</tr>
<tr class="alt">
<td>C1</td>
<td>C2</td>
</tr>
</tbody>
</table>
</div>
<style>
.search-table {
display: block;
background-color: #535353;
font: normal 12px/150% Arial, Helvetica, sans-serif;
overflow: hidden;
border: 1px solid #8C8C8C;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.search-table a {
color: #424242;
}
.search-table table {
border-collapse: collapse;
text-align: left;
width: 100%;
background-color: #ffffff;
}
.search-table table td, .search-table table th {
padding: 3px 10px;
}
.search-table table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) );
background: -moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D');
background-color: #8C8C8C;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
border-left: 1px solid #A3A3A3;
}
.search-table table thead th:first-child {
border: none;
}
.search-table table tbody td {
color: #424242;
border-left: 1px solid #DBDBDB;
font-size: 1.25em;
font-weight: normal;
padding: 0.5em;
}
.search-table table tbody tr {
z-index: 0;
}
.search-table table tbody tr:hover {
box-shadow: 0px 0px 3px 0px #00000082;
z-index: 1;
}
.search-table table tbody tr.alt {
background: #EBEBEB;
color: #424242;
}
.search-table table tbody td:first-child {
border-left: none;
}
.search-table table tbody tr:last-child td {
border-bottom: none;
}
</style>
As you can see, the box-shadow appears as it should when hovering above the darker colored rows with the "alt" class, but for lighter colored rows,it only displays the shadow on the top of the row and not on the bottom. Removing the "alt" class from the 2nd and 4th rows fixes it, but at the cost of alternating row colors. What is causing this behavior to happen, and how can I fix it?
You can fix the problem of the box shadow being "hidden" by other table rows by applying transform: scale(1) to the hovered row:
.search-table table tbody tr:hover {
box-shadow: 0px 0px 3px 0px #00000082;
transform: scale(1);
}
it seems that the z-index of a <tr> cannot be altered like you want so that the shadow appears above the rows with a background color.
This is imperfect, but you could set the BG colors on the <tr> elements like you are currently doing, and then set the hover box-shadow on the inner <td> elements like this
.search-table table tbody tr:hover td {
box-shadow: 0px 0px 3px 0px #00000082;
}
It's not perfect since the inner horizontal borders between cells also gets the shadows, but it might be possible to set a custom shadow size/position per cell and have those applied.
Another alternative might be to keep what you have and use an inset shadow on the <tr> like this:
.search-table table tbody tr:hover {
box-shadow: inset 0px 0px 3px 0px #00000082;
}
And then a final complex solution might be to use some JS to move a transparent element with a shadow around and position & size it correctly upon hovering each cell.
or... what I could do it just change the BG color of the row on hover and forget about the shadows!
I have css :hover element (table row) which behaves weirdly. On some machines it gives pixel artefacts which disappear by itself or when hover over and out again. Sometimes it's a whole line, sometimes just a fragment of it. On some machines including my own (same browser versions) I can't get the same behavior, which makes it very hard to test and fix.
Got the issues in Chrome (52.0.2743.116), Opera (39.0.2256.48), Firefox (48.0). Haven't managed to reproduce in Edge (25.10586) and IE (11.494).
Snippet (couldn't make it work, link below has a working example):
.table {
margin-bottom: 0;
}
.table > tbody > tr > td {
border: 0;
padding-top: 2px;
padding-bottom: 2px;
}
.table-wrapper {
width: 100%;
overflow-x: auto;
background-color: white;
padding: 1px;
height: auto;
max-height: 75vh;
border: 1px solid #616161;
/* Darkgray */
border-collapse: collapse;
}
.panel-body .table-wrapper {
border: 0;
}
/*Default draw color in table*/
.dfx-table {
color: black !important;
}
.row-disableMargin {
margin-left: -3px;
margin-right: 0;
}
.table-row {
height: 3em;
border-left: 3px solid transparent;
border-top: 1px solid #EEEEEE;
/* Lightgray */
border-collapse: collapse;
}
.table-row-link,
.row {
border-left-color: transparent;
border-left-style: solid;
border-left-width: 3px;
}
.table-row-link:hover {
cursor: pointer;
border-left: 3px solid #F44336 !important;
/* Red */
}
.table-header {
font-weight: normal !important;
color: #9E9E9E !important;
/* Gray */
border-right: 0px solid white !important;
border-bottom: 0px solid #EEEEEE;
/* Lightgray */
height: 3em;
vertical-align: middle;
}
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > th {
border-right: 0 !important;
border-left: 0 !important;
vertical-align: middle;
}
.table-header a {
font-weight: normal !important;
color: #9E9E9E !important;
/* Gray */
}
.table-header > th > a,
.dfx-table-header > a {
border-bottom: 2px solid transparent !important;
}
.table-header > th > a:hover,
.dfx-table-header > a:hover {
border-bottom: 2px solid #F44336 !important;
/* Red */
}
<div class="table-wrapper">
<table class="table table-bordered dfx-table">
<thead>
<tr class="table-header">
<th dfx-sort-col="Id">ID</th>
</tr>
</thead>
<tbody>
<tr class="table-row table-row-link">
<td>V001069</td>
</tr>
<tr class="table-row table-row-link">
<td>V001070</td>
</tr>
</tbody>
</table>
</div>
Screenshots of normal hover(1)
and with artefact(2) - vertical thin red lower line is the one which shouldn't be there:
Any ideas why this might happen?
Edit: made example on Snippet (doesn't work for some reason), also a copied it here: http://cssdeck.com/labs/full/uxjvf4fg
Well it's certainly a weird one, but then again, table rows have never played well with styles being applied to them in my experience.
What you can do instead, is just apply the border to the first cell within it like so:
.table-row-link:hover :first-child {
cursor: pointer;
border-left: 3px solid #F44336 !important; /* Red */
}
Here's your example from before, but working: http://cssdeck.com/labs/s56owpbt
As a general rule, I always apply "row styles" to the cells within them to get the effect I want. It tends to avoid weirdness like this.
I want in a table in html a border left.
Here is the table
.weTable td{
border-color:#dcdcdc;
border-width:1px;
border-style:solid;
}
This is for the table cell and this has the table
border-left: 15px solid #548dd4;
My problem is I want a vertical line left and its not a straight line on this way.
Now:
What I want:
try this one?
table {
border-left: 15px solid #548dd4;
border-spacing: 0px;}
The problem is caused by the fact that borders meet at an angle so unless you remove the border from the top you cannot get straight 'joins'.
As an alternative, you could add extra padding-left to the cell and use an inset box-shadow like so.
table {
border-collapse: separate;
border-spacing: 5px;
margin: 1rem;
text-align: center;
}
table td {
width: 50px;
border-color: black;
border-width: 1px;
border-style: solid;
padding: 50px;
padding-left: 65px;
position: relative;
}
table td {
box-shadow: inset 15px 0 0 lightblue;
}
<table class="shadow">
<tr>
<td>aaa</td>
<td>aaa</td>
<td>aaa</td>
</tr>
</table>
i apply a border-radius to my table but it's not working
CSS :
table {
border: 1px solid;
border-radius: 10px;
border-collapse: collapse;
}
here's a FIDDLE
PS. i want to use border-collapse: collapse not border-collapse: separate
Did you try removing border-collapse: collapse?
table {
border: 1px solid;
border-radius: 10px;
}
remove your border-collapse
table{
border: 1px solid;
border-radius: 10px;
}
Edit this in your table:
table {
border: 2px solid black;
border-radius: 10px;
overflow:hidden;
}
And here is the edited fiddle: http://jsfiddle.net/piyushkmr/TExvf/7/
Box properties only works with DIV tag. you can do that if you want to create your table with DIV.
I have 4 different table styles as follows:
table {
margin: 10px;
border: 1px solid rgb(166, 201, 226);
}
table th {
background-color:navy;
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table td {
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
/* Invisible - no borders, no table margin */
table.invisible {
margin: 0px;
border: 0px;
}
table.invisible td {
border: 0px;
vertical-align: top;
}
/* Invisible: Middle Align */
table.invisible-middlealign {
margin: 0px;
border: 0px;
}
table.invisible-middlealign td {
border: 0px;
}
/* Invisible: Middle Align - No Pad */
table.invisible-middlealignnopad {
margin: 0px;
border: 0px;
}
table.invisible-middlealignnopad td {
border: 0px;
padding: 0px;
}
/* Invisible: No Pad */
table.invisible-nopadding {
border: 0px;
margin: 0px;
}
table.invisible-nopadding td {
border: 0px;
padding: 0px;
vertical-align:top;
}
Sometimes I am finding that for example I need an 'invisible' table inside a 'invisible-middlealignnopad' table but on another occasion the 'invisible-middlealignnopad' table needs to be inside the 'invisible' one. Given the different combinations I can have, the only way I have catered for this is by doing something like the following:
table.invisible td table.invisible-middlealignnopad td {
border: 0px;
padding: 0px;
}
I then have to replicate this for all combinations.
I'm guessing that there's got to be a better/standard way of handling this requirement. Appreciate any suggestions :)
Thanks,
Neil
Could you simply create a class that you add to the HTML to control these certain things that need to be "overwritten" so to speak? For example...
CSS
Change your above CSS to the below... If I am following your CSS correctly you need to account for times when a table should have no margin and no border, when a tables TD should have no padding and no border, and when a td should be aligntop or align middle. In the below CSS, you can control the tables margin and border, td's padding and border and td's vertical alignment by adding classes to the tables appropriately.
Basically.. You are using HTML classes to override things, instead of using complex CSS selectors to override. The overrides are more granular and controlled by your HTML.
table {
margin: 10px;
border: 1px solid rgb(166, 201, 226);
}
table th {
background-color:navy;
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table td {
padding: 4px, 5px;
border: 1px solid rgb(166, 201, 226);
vertical-align: middle;
}
table.no-margin {
margin: 0px;
border: 0px;
}
table.no-padding td {
padding: 0px;
border: 0px;
}
table.align-top td {
vertical-align: top;
}
HTML
<table>
<td>
<table class="no-pad-border">
<td>
Something
</td>
</table>
</td>
</table>