How to merge the two blank cells (one above 'Be' and one above 'B') with big blank space in the middle? I tried colspan and rowspan in different ways and still don't know how to do it.
https://i.stack.imgur.com/tw5SE.png
My code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="ex10.css">
</head>
<body>
<table style="width:800px;">
<tr class="tr1">
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr class="tr2">
<td>H</td>
<td class="tr1"></td>
<td colspan="3" rowspan="3"></td>
<td></td>
<td>He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td>B</td>
<td>Ne</td>
</tr>
<tr class="tr4">
<td>Na</td>
<td>Mg</td>
<td>Al</td>
<td>Ar</td>
</tr>
<tr class="tr5">
<td>K</td>
<td>Ca</td>
<td>Sc</td>
<td>Ti</td>
<td>V</td>
<td>Ga</td>
<td>Kr</td>
</tr>
</table>
</body>
</html>
CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.tr1, th{
color: red;
width: 110px;
}
td{
width: 110px;
height: 54px;
text-align: center;
font-weight: bold;
font-family: Calibri;
}
td:first-child {
background-color: #b4eba8;
}
td:nth-child(2):not(.tr1){
background-color: #76f9fd;
}
td:last-child{
background-color: #fadb47;
}
Structurally you can't... but with css you can do it appear, here's your "only-visual" solution:
https://jsfiddle.net/fe74c5cq/
.bigtd{
border:none;
}
.tdForT
{
border-left:none;
}
.tr1{
border-right:none;
}
take a look at css section, these three classes on the top made the trick (obviously I've put it in the right elements), you should be aware that the border that you see in a natural table, seems to be all "single" borders, but instead, when they are between a cell and another, they are twice!
You see a "single" border because in CSS there's a the property "border-collapse" for table valorized with "collapse" value.
So, when you want to make a border desappear, you must take it away from all adjacent elements.
I would like to remove the outlining borders from my table, i.e. the top, bottom, left and right border that is now in black 1px. I've tried to change in my css but it does only take away the borders from the whole table.
Also I would like to (ON HOVER) add a to the cells on the left hand, a left bold colored border. If that makes sense?
Like this: if I hover a row in the table (as it is now) it gets colored as intended. But I want the outermost left cell to also get a bold border on its left side. This cell: <td class="rowTitle">TITLE</td>
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Compare Table</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<table style="width:100%" class="hoverTable">
<tr>
<td class="blankcell"></td>
<td id="check">Image</td>
<td>Image</td>
<td>Image</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="check">✔</td>
<td>✔</td>
<td>✔</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td id="x01">✖</td>
<td>✖</td>
<td>✖</td>
</tr>
<tr>
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
</table>
</body>
</html>
Here is my css:
th,td {
padding: 15px;
text-align: center;
}
.hoverTable tr:nth-child(even) {
background-color: #eee;
}
.hoverTable tr:nth-child(odd) {
background-color:#fff;
}
/* Upper left cell*/
.blankcell {
background: none!important;
border: none!important;
}
/* HOVER FUNCTION */
.hoverTable{
width:100%;
border-collapse:collapse;
}
.hoverTable td{
padding:7px;
border: #000000 0px solid;
}
/* Define the default color for all the table rows */
.hoverTable tr{
background: #ffffff;
border: 1px solid black;
}
/* Define the hover highlight color for the table row */
.hoverTable tr:not(:nth-child(1)):hover {
background-color: #86D694;
}
/* Check and X-Mark Coloring*/
#check {
color: #1CF200;
}
#x01 {
color: #ff6969;
}
I'm grateful for any help on this matter, thank you!
You can modify the css of the selected rows.
This will be your default css (which set the borders)
.hoverTable tr{
background: #ffffff;
border-bottom: 1px solid black;
border-top:1px solid black;
}
This will be your css on hover
.hoverTable tr:not(:nth-child(1)):hover {
border-left:5px solid black;
}
I have added an id for the top and bottom rows called notop and last
Updated HTML:
<tr id = "notop">
<td class="blankcell"></td>
<td id="check">Image</td>
<td>Image</td>
<td>Image</td>
</tr>
<tr id = "last">
<td class="rowTitle">TITLE</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
</tr>
CSS for the top and bottom rows
#notop{
border:0px;
}
#last{
border-bottom:0px;
}
Check out the working fiddle:http://jsfiddle.net/2o144n92/
hello please use/try this
CSS
border-left
border-right
border-top
border-bottom
check this link enter link description here
I am trying to create a border on top of another element's border.
I have something like the following
html
<table class='table'>
<tr>
<td>123</td>
<td class="pick">123</td>
<td>123</td>
</tr>
<tr>
<td class="second" style="text-align:center;" colspan='3'>123</td>
</tr>
</table>
css
.pick {
border-bottom:solid 5px green;
}
.second {
border:solid 5px red !important;
background-color: green;
}
http://jsfiddle.net/j8zt8sb3/1/
Basically I want to create a gap look for the <td> that has a class 'pick'. Everything works fine on every browser but the red border will cover the green border in IE which means there is no gap. Is there anyways to fix this? Thanks a lot!
Just add this property:
table {
border-collapse: collapse;
}
I'm attempting to create an HTML table that displays a list of vehicles down the page along with columns for each hour of the day. Within each hourly column I would like to display five bars of varying colors that indicate activity over 12 minute periods. This is an abbreviated version of my latest attempt showing the first two hours:
<table>
<thead>
<tr>
<th class="mobile_column" colspan="1">Mobile Name</th>
<th class="time_column" colspan="5">00</th>
<th class="time_column" colspan="5">01</th>
</tr>
</thead>
<tr>
<td class="mobile_column">Test</td>
<td class="no_data"> </td>
<td class="ignition_off"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="moving"> </td>
<td class="no_data"> </td>
<td class="no_data"> </td>
</tr>
</table>
I'm using the following CSS to format each bar:
.no_data, .no_data_legend {
background-color: White;
}
.moving, .moving_legend {
background-color: Green;
}
.idling, .idling_legend {
background-color: Yellow;
}
.ignition_off, .ignition_off_legend {
background-color: Red;
}
.ignition_toggle, .ignition_toggle_legend {
background-color: Purple;
}
.no_data, .moving, .idling, .ignition_off, .ignition_toggle {
width: 5px;
height: 24px;
float: left;
display: inline-block;
padding: 0px 0px 0px 0px;
}
I'm fairly inexperienced in HTML layout but from my reading I was expecting that five of the bars should appear under each of the hourly headings and go across the page, however they all appear under the first hour and then wrap down the page.
I've posted a JSFiddle at http://jsfiddle.net/dKb6Z/2/ that contains the data for 24 hours that makes it more apparent. Any assistance including preferred alternative ways to format the data would be appreciated.
Remove
float: left;
display: inline-block;
from your CSS. It is destroying the standard table layout.
Working jsFiddle here.
Further to #winterblood's answer (sorry, unable to comment), if you are wanting to remove the padding from the cells (which I am assuming you were trying to do with the float + inline-block), you can add the following:
table {
border-collapse: collapse;
}
th, td {
padding: 0;
}
Fiddle
See this demo mate, I also added a dotted border so that you can see the 5 cells clearly, aligned under each hour. Also changed white color to grey as it's invisible on JS Fiddle default background.
Remember to include this table {border-collapse:collapse;}
Demo here: http://jsfiddle.net/Godinall/Tc2cx/1/
After some research, I couldn't find an answer to this question. There was this but it didn't really answer my question. I would like to "strikethrough" a complete HTML table row in CSS, not just the text in it. Is it at all possible? From the example that I linked, it seems tr styling doesn't even work in Firefox. (And anyway, text-decoration only applies on text afaik)
Oh yes, yes it is!
CSS:
table {
border-collapse: collapse;
}
td {
position: relative;
padding: 5px 10px;
}
tr.strikeout td:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
HTML:
<table>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr class="strikeout">
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
<tr>
<td>Stuff</td>
<td>Stuff</td>
<td>Stuff</td>
</tr>
</table>
http://codepen.io/nericksx/pen/CKjbe
My answer (below) said that it is not possible. I was wrong, as pointed out by #NicoleMorganErickson. Please see her answer (and upvote it!) for how to do it. In short, you use :before pseudo-class to create an element that draws a border across the middle of the cell, above the content:
table { border-collapse:collapse } /* Ensure no space between cells */
tr.strikeout td { position:relative } /* Setup a new coordinate system */
tr.strikeout td:before { /* Create a new element that */
content: " "; /* …has no text content */
position: absolute; /* …is absolutely positioned */
left: 0; top: 50%; width: 100%; /* …with the top across the middle */
border-bottom: 1px solid #000; /* …and with a border on the top */
}
(original answer)
No, it is not possible using only CSS and your semantic table markup. As #JMCCreative suggests, it is possible visually using any number of ways to position a line over your row.
I would instead suggest using a combination of color, background-color, font-style:italic and/or text-decoration:line-through to make the entire row obviously different. (I'd personally strongly 'fade out' the text to a color much closer to the background than normal text and make it italic.)
tr {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGCQBAAAIwAbDJgTxgAAAABJRU5ErkJggg==');
background-repeat: repeat-x;
background-position: 50% 50%;
}
I used http://www.patternify.com/ to generate the 1x1 image url.
Edit
In a recent Bootstrap 4.3 ServiceNow Angular.js project, I found myself having to make some changes, and instead used the following CSS, similar to the experience of Revoman:
tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
display: inline-block;
padding: 12px 10px;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Original Post
I like Nicole Morgan Erickson's answer, but it might cause side effects if your implement his solution verbatim. I've add some small tweaks to keep this kosher, below... so that we're not globally modifying every table or every td with this CSS.
I also wanted a button on the row to strike out the row, but I didn't want to strike out the column with the button, for visibility sake. I just wanted to strike out the rest of the row. For this, I made it so that every column that wants to be capable of showing the strike out must declare such by also being marked with a class. In this iteration, you'd need to mark the table as strike-able, and also mark each td as strike-able; but you gain safety by not side effecting any non-strike-able tables, and you gain control of which columns to strike out.
CSS:
table.strike-able {
border-collapse: collapse;
}
table.strike-able tr td {
position: relative;
padding: 3px 2px;
}
table.strike-able tr th {
position: relative;
padding: 3px 2px;
}
table.strike-able tr.strikeout td.strike-able:before {
content: " ";
position: absolute;
top: 50%;
left: 0;
border-bottom: 2px solid #d9534f;
width: 100%;
}
Usage:
<table class="strike-able" id="Medications" data-item-count="#Model.Medications.Count">
<tr>
<th>
Some Column
</th>
<th>
Command Column
</th>
</tr>
<tr class="strikeout">
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here (active)</td>
</tr>
<tr>
<td class="strike-able"></td>
<td>Button that Toggles Striking Goes Here</td>
</tr>
</table>
Lastly, since I'm using this with Bootstrap, and treating the deletions as a dangerous thing to do, I've formatted the colors a little to match my use.
EDIT: As pointed out by #Mathieu M-Gosselin in the comments, this actually puts the line behind the text. That said, if your line is the same color as your text or you are using a small-ish font, this still works pretty well.
For what it's worth, here's a pretty effective way to do it in pure CSS without using pseudo elements. You can change the thickness of the strikethrough line by adjusting the background-size.
table {
border-collapse: collapse;
}
td {
width: 100px
}
.strikethrough {
background: repeating-linear-gradient(
180deg,
red 0%,
red 100%
);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}
<table>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr class="strikethrough">
<td>Foo Strike</td>
<td>Bar Strike</td>
<td>Baz Strike</td>
</tr>
</table>
#NicoleMorganErickson, I like your answer, but I could not get the strikeout to affect only the applied row. Also, I needed it to be applied multiple rows so I modified your solution down into a single class.
CSS:
tr.strikeout td:before {
content: " ";
position: absolute;
display: inline-block;
padding: 5px 10px;
left: 0;
border-bottom: 1px solid #111;
width: 100%;
}
http://codepen.io/anon/pen/AaFpu
Yes you can. In the first cell of the row you create a div containing a HR. Float the div to the left and specify its width as a % of its containing element, in this case the table cell. It'll stretch as wide as you want across the table cells in that row, even beyond the width of the table if you want.
This works for me:
<style>
.strikeThrough {
height:3px;
color:#ff0000;
background-color:#ff0000;
}
.strikeThroughDiv {
float:left;
width:920%;
position:relative;
top:18px;
border:none;
}
</style>
<table width="900" border="1" cellspacing="0" cellpadding="4">
<tr valign="bottom">
<td>
<div class="strikeThroughDiv"><hr class="strikeThrough"/></div>
One
</td>
<td>
<label for="one"></label>
<input type="text" name="one" id="one" />
</td>
<td>
<label for="list"></label>
<select name="list" id="list">
<option value="One">1</option>
<option value="Two">2</option>
<option value="Three" selected>3</option>
</select>
</td>
<td>
Four
</td>
<td>
Five
</td>
</tr>
</table>
To control the width of your line you have to specify the width of the table cell containing the HR. For styling HR elements they say you shouldn't make it less than 3px in height.
Here's a very simple way that worked for me:
<table>
<tbody style="text-decoration: line-through">
-- Various table body stuff
</tbody> </table>
Not sure but it seems there were other answers mentioning simple and straightforward pure CSS solution...
#Ben Slade's answer is the closest of all, but still...
Just use text-decoration: line-through in your CSS! Add corresponding class and then use <tr class="strikethrough">!
.strikethrough {
text-decoration: line-through;
}
table,
th,
td {
border: 1px solid black;
}
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr class="strikethrough">
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>