I want to add a ::before selector on some table cells what has a position:absolute , but it fails:
table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }
.useBefore::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
I noticed that if I add the ::before to all of the tr's then it works:
table{
border:1px solid #ccc;
padding:10px;
}
table td{
border:1px solid #ccc;
padding:5px;
}
tr::before{
content:'before';
position:absolute;
}
<table>
<tbody>
<tr>
<td>bird</td>
<td>animal</td>
<td>nature</td>
</tr>
<tr class='useBefore'>
<td>building</td>
<td>robot</td>
<td>city</td>
</tr>
</tbody>
</table>
But this is not what I want, because I want to add it only on some of them.
I'm not sure why it fails exactly, but you could add it on the first table cell instead.
.useBefore td:first-child:before{
content:'before';
position:absolute;
}
Related
First if anyone has a better title for this question can edit. I have a table with three row and three column. The td element in this table has contenteditable attribute , so the user can write something in it. My problem is that when we press enter key in the td to generate new line, the td height increase for one line but other cells of current row stay in primary height. The below figure display my porpuse clearly:
I have some style for table:
table{
margin:.5em 0;
display:inline-block;
border-collapse:collapse;
border-spacing:0;
table-layout:fixed;
}
table tr{
width:100%;
height:auto;
white-space:nowrap;
overflow:visible;
vertical-align:center;
}
table td{
width:100%;
Height:100%;
min-height:2em;
padding:0 .6em;
display:inline-block;
overflow:hidden;
}
Rendered HTML code of table:
<table>
<tbody>
<col/>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<col/>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<col/>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
How I can fix this problem?
Remove the inline-block style for td elements
document.querySelectorAll('td').forEach(td=>td.contentEditable = true);
table{
margin:.5em 0;
width:800px;
/*display:inline-block;*/
border-collapse:collapse;
border-spacing:0;
table-layout:fixed;
}
table tr{
width:100%;
height:auto;
white-space:nowrap;
overflow:visible;
vertical-align:center;
}
table td{
/*width:100%;*/
Height:100%;
min-height:2em;
padding:0 .6em;
/*display:inline-block;*/
border:1px solid blue;
overflow:hidden;
}
<table>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td>afsd</td>
<td>fasdfsa</td>
<td>fasdf</td>
</tr>
<tr>
<td>fasdfas</td>
<td>fasdfas</td>
<td>fasdfs</td>
</tr>
<tr>
<td>fasdfs</td>
<td>fasdfa</td>
<td>faasdflkj</td>
</tr>
</tbody>
</table>
Here's the fiddle:
https://jsfiddle.net/80mek2sL/1/
I want to select all but the first tr and apply:
border-top: 1px grey solid;
Then I want to select all first td's but not the first td of the first tr (= ignore first tr) and apply
border-right: 1px grey dotted;
(I totally dont care about compatibility with prehistorical Web browsers, I just want it to work on nowadays Web browsers)
What I dont get (that's why I'm lost actually) is that immediate selector table > tr doesn't select tr (otherwise I would have solved my problem)
Your selector is working. The problem is that tr's don't have a border. You need to apply it the td within...
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
Updated Fiddle
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px; padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
<h1>Vim</h1>
<table id="cheatsheet">
<thead><tr>
<td colspan="2"><h3>aa</h3></td>
</tr></thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code></td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code></td>
<td style="width:auto">split vertical</td>
</tr>
</table>
On another note, the reason table > tr doesn't work is because tr's are not an immediate descendant of table in the rendered HTML. If you use your browsers element inspector you will see that thead and tbody elements are automatically inserted for you
EDIT
After the comment below all you need to do is this...
#cheatsheet tbody td {
border-top:1px grey solid;
background-color: #EF0;
}
ie. target the td within tbody only,
Updated Fiddle
check fiddle :https://jsfiddle.net/80mek2sL/6/
nth-child(n+2) selector helps to select any number of child. in following example I am selecting row from ahead of second child.
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
You can also play aorund (n + *) and check the result to better understand the nth-child selector
note: you can not put border property to <tr> so you will need to
assign it to <td>
HTML
<table id="cheatsheet">
<thead>
<tr>
<td colspan="2">
<h3>aa</h3>
</td>
</tr>
</thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code>
</td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
</table>
CSS
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px;
padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
I want to have a fixed width for my editable table, but I also wanting to set different width for each TD.
In my attempt I am able to get the table set at a fixed width, but this causes the width of the TDs appear to be 50% instead of the 80% - 20% I had before setting the fixed width
CSS
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
HTML
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</table>
What am I missing? Check this Fiddle if it will help. Try it out by typing enough to see it automatically goes to the next line after a certain point.
The problem with your code is that your first <tr> is having colspan="2". So when you give a width:100% to all the TDs of the table, the css won't get applied to the underlying TDs as you want.
Your solution is to separate the Header td: <td colspan="2">Header:</td> into a separate table (Refer HTML-1 below)
or
put the underlying TDs in the same TR as that of the header (Refer HTML-2 below).
Also change the CSS and simplify it like I did below. you have written a lot of unnecessary CSS.
Working Fiddle Here
Here's what I tried. try this:
HTML-1:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
</tbody>
</table>
<table class="fixed" >
<tbody>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</table>
HTML-2:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</tr>
</tbody>
</table>
Simplified CSS:
table {
margin: 0 0;
width: 100%;
table-layout: fixed;
}
.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}
.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }
You have Errors in your html syntax although that is nothing to do with the problem.
See if you need something like this fiddle.
table {
margin: 15px 0;
border: 1px solid black;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</tbody>
</table></div>
otherwise you wont be able to achieve variable td width as all the td will have same width in a column.
you can use colspan attribute for a workaround.
I've got a table with a <hr>, a title and a body text. I put the hover effect on the whole table but for the <hr>, it doesn't change the colour when mouseover the table only when mouseover the line. I need it to change colour as soon as the mouse touches the table like the rest. I tried various things but none seem to have worked.
How can I get the <hr> line to change the colour to white like the rest of the table when mouseover anywhere on the table? JSFiddle
HTML:
<body>
<table>
<thead>
<tr>
<td><hr /></td>
</tr>
</thead>
<thead>
<tr>
<td>This is the Header</td>
</tr>
</thead>
<tbody>
<tr>
<td>some row content</td>
</tr>
</tbody>
</table>
</body>
CSS:
hr{
border:1px solid;
float:left;
align:left;
width:30%;
background-color:#991f33;
color:#991f33;
}
hr:hover{
background-color:#fff;
color:#fff;
}
table {
border:0;
background-color:#dcdcdc;
text-align:left;
text-decoration:none !important;
padding:20px;
}
thead tr a{
color: #911f33;
}
tbody tr{
font-size:10px;
line-height:19px;
color: #911f33;
}
table:hover, table:hover a{
color:#fff;
background-color:#911f33;
}
tr a{
color:#000;
}
<td><hr id="hrr"/></td>
css is
table:hover #hrr
{
border:1px solid blue;
}
I am targeting Chrome and other CSS3 compliant browsers and would like to have border separation for every other row.
The CSS I currently have working for every row looks like this-
table{
border-collapse:separate;
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
What I would like to achieve is this:
CSS
table{
border-collapse:separate;
}
table tr:nth-of-type(odd){
border-spacing: 0px 3px;
}
td{
border: 1px solid black;
padding: 5px;
}
HTML
<table>
<tr>
<td>a-one</td><td>a-two</td><td>a-three</td>
</tr>
<tr>
<td>a-four</td><td>a-five</td><td>a-six</td>
</tr>
<tr>
<td>b-one</td><td>b-two</td><td>b-three</td>
</tr>
<tr>
<td>b-four</td><td>b-five</td><td>b-six</td>
</tr>
<tr>
<td>c-one</td><td>c-two</td><td>c-three</td>
</tr>
<tr>
<td>c-four</td><td>c-five</td><td>c-six</td>
</tr>
</table>
The data is in two row sets and needs to be connected, whereas different sets need to be separated. I would like to keep it in table form to take advantage of the browsers auto-column widths. It seems like border-spacing can only be achieved on the table level. I am already using borders for styling so transparent borders is not a viable option.
Any chance for me- or I am I stuck?
JS-fiddle here identical to above here: http://jsfiddle.net/sSba4/
I'd argue that if the data needs to be visually chunked in separate containers, perhaps the most semantic solution would involve using multiple tables.
However, if you want to keep everything in a single table for whatever reason, then you would need to introduce non-semantic markup to create those visual separations, as border-spacing is a property of the table, not of the row or cell.
<table>
<tr><th></th></tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
</tr>
<tr><th></th></tr>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
<tr>
<td>Apples</td>
<td>$3.50</td>
<tr><th></th></tr>
<tr>
<td>Oranges</td>
<td>$2.46</td>
<tr>
<td>Pears</td>
<td>$2.10</td>
</tr>
</table>
CSS
table {
border-collapse:collapse;
}
table tr td {
border: solid #ccc 1px;
padding: 5px 7px;
}
table tr th {
border: none;
padding-top: 5px;
}
See it in action here http://jsfiddle.net/wYCNg/
How about adding an additional row with transparent borders?
html:
<table>
<tr><td>a-one</td><td>a-two</td><td>a-three</td></tr>
<tr><td>a-four</td><td>a-five</td><td>a-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>b-one</td><td>b-two</td><td>b-three</td></tr>
<tr><td>b-four</td><td>b-five</td><td>b-six</td></tr>
<tr class="break"><td colspan="3"></td></tr>
<tr><td>c-one</td><td>c-two</td><td>c-three</td></tr>
<tr><td>c-four</td><td>c-five</td><td>c-six</td></tr>
</table>
css:
table{
border-collapse:collapse;
}
td{
border: 1px solid black;
padding: 5px;
}
tr.break, tr.break td{
border:none;
height:5px;
padding:0;
}
I've just been considering the same matter. If you put div element inside td, you can use plenty of box-model properties, eg. margin. If you additionally hide td borders you can use margin to set space between cells, rows, cols.
#tab {
border-collapse:collapse;
}
#tab td{
padding:0px;
}
#tab td>div {
width:50px;
height:50px;
background-color:#97FFF8;
margin:1px;
}
#tab td:nth-child(1)>div {
margin-right:10px;
}
#tab tr:nth-child(1) div {
margin-bottom:10px;
}
<table id="tab">
<tbody>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
<tr>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
<td><div></div></td>
</tr>
</tbody>
</table>