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>
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'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
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>
I have a table. Inside that table some td have the class "arrow". For the td that have this class I would like to put an arrow (triangle) on the left border of that td. I would like to use only css to achieve that. Note that I wish the arrow to start below the top border and end above the bottom border. I tried to apply several "pure css arrows tutorials" I found on the internet but I do not manage to make it work on td. I hope I was clear and I hope someone might help. Thank you in advance for your replies. Cheers. Marc.
http://cssdesk.com/PzASe
My HTML :
<table>
<tr>
<td>td1</td>
<td class="arrow">td2</td>
<td class="arrow">td three</td>
</tr>
<tr>
<td>td4</td>
<td class="arrow">td five</td>
<td class="arrow">td6</td>
</tr>
</table>
My CSS:
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
What is your target audience with this? Most of the CSS techniques for drawing shapes like triangles involve things like insert new elements, and advanced CSS properties (read: don't work in IE), I would suggest biting the bullet and using an old-fashioned background image.
If you're doing it as a proof of concept, and you don't care what browser a visitor is using, have you looked at this tutorial on CSS tricks?
You would need to insert a <div> into those cells, and then apply styling like this:
.arrow div {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid blue;
}
Try this css. Your td was center aligned which added that odd space before your arrow. (see it in action here css code
table{
border-spacing: 0px;
border-collapse: collapse;
text-align:center;
vertical-align:middle;}
td{
padding:10px;
border:1px solid purple;}
.arrow:before {
content:'';
position: relative;
top: 0;
left: -10;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid transparent;
border-left: 5px solid black;
}
.arrow {
text-align:left;
}
I want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 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{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}