I've tried searching, but I don't know what to call this. I'm trying to do accomplish what looks like the left side in this picture:
However when I change the width of the page, it folds and causes an unwanted behavior.
I'm using margin-left: 50px; float:left for the caret and margin-right: 50px for the text.
http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="font-awesome#*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="table table-bordered text-center">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><i class="fa fa-caret-up" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">2332</span></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td style="width: 300px"><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Is there a better way of doing this without the folding?
Try the following: http://jsfiddle.net/jLod5cv9/. Each element of the cell is set to be inline-block and white-space: nowrap declaration should keep these together.
HTML:
<table>
<tr><td class = "up" data-number = "3"></td></tr>
<tr><td class = "down" data-number = "-55"></td></tr>
<tr><td class = "down" data-number = "-44"></td></tr>
<tr><td class = "up" data-number = "1"></td></tr>
<tr><td class = "up" data-number = "65"></td></tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table td {
white-space: nowrap;
border: 1px solid #ccc;
padding: 5px 10px;
color: green;
}
table td.down {
color: red;
}
table td:after {
content: attr(data-number);
display: inline-block;
font: normal 12px/1 Sans-Serif;
width: 25px;
text-align: center;
}
table td:before {
content: "";
display: inline-block;
border-style: solid;
border-width: 0px 4px 5px 4px;
border-color: transparent transparent green transparent;
margin-right: 15px;
}
table td.down:before {
border-width: 5px 4px 0 4px;
border-color: red transparent transparent transparent;
}
When using margin, you tell the page to have a defined margin there. if there is not enough space horizantally to display all parts, then a linebreak is inserted, what causes your strange view. Maybe this could help you.
I can't find a way to have it exactly in the middle mainly because your digits will always change. Sometimes you will have 4, sometimes 2 so getting it exactly the way you provided at the top won't happen. However, if you get it mostly with the same digits, like 2, then the way I posted here will work http://plnkr.co/edit/vQeSURKTVyoeaj6MqsxX?p=preview . I took out your hardcode in the html and used straight css.
css:
/* Styles go here */
tbody tr td { width: 33%;}
tbody tr td:nth-child(4) { width:33%;}
tbody tr td i { width:50%; text-align:right; margin-right:10px;}
tbody tr td span { width:50%; text-align:left;}
html:
<body>
<table class="table table-bordered text-center">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><i class="fa fa-caret-up" ></i><span>2332</span></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><i class="fa fa-caret-down"></i><span>1.2</span></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><i class="fa fa-caret-down"></i><span>1.2</span></td>
</tr>
</tbody>
</table>
The nth-child is just in case you want to change certain td containers like color or width.
The layout issue is due to your floated element (caret). If your page shrinks in width, then the columns of your HTML table will also shrink and may cause your elements to wrap onto two lines.
What I would do is wrap the caret and number in a div (HTML table) and in turn put the caret and number in a separate span (HTML table cell). The result is that the caret and the number will always be on a single line and you have some ability to control vertical alignment and spacing (using padding).
.tablecell {
border: 1px dotted blue;
display: table-cell;
}
.table {
display: table;
width: 100px; /* optional */
}
.table span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50%;
}
.table span.left {
text-align: right;
padding-right: 5px;
}
.table span.right {
text-align: left;
padding-left: 5px;
}
<div class="tablecell">
<div class="inner table">
<span class="left">x</span>
<span class="right">21</span>
</div>
</div>
Related
I would like to highlight a row (change the background color) when i hover over any cell excluding the first 3 cells on the row (button cells). I also need to exclude the first row from the grid as that is the header row. (Images show desired behavior)
I have tried using many different :hover css selectors. But i cant seem to find the combination that allows me to highlight the row when hovering over any cell except the first 3.
table tr:hover td {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Thanks!!
The 4th, 5thth, and 6th
columns were all <th>, the cells that are in the <tbody> should be <td>, so that is corrected. Also, I added a <thead> to it as well and an extra <tr> to show that the highlight affects each <tr> separately.
In order to meet the following criteria:
no JavaScript
valid HTML and CSS only
the 4th, 5thth, and 6th <td> of any <tr> within the <tbody> should all be highlighted at once if any one of them is hovered over.
the 1st, 2nd, and 3rd <td> of any <tr> within the <tbody> should never trigger any effects when hovering over them.
A sub-table could be used to isolate the last 3 columns:
in the <tbody>, remove the last 2 <td> of each <tr>.
add colspan="3" to the last <td> of each <tr> within the <tbody>
add a <table> into each of those <td colspan="3">
add a <tr> into that <table>
add 3 <td> into that <tr>
Figure I - a sub-table
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
table {
table-layout: fixed;
border-collapse: collapse;
}
th {
width: 5%;
}
th:nth-of-type(4) {
width: 50%;
}
th:nth-of-type(5) {
width: 5%;
}
th:nth-of-type(6) {
width: 15%;
}
td {
border: 1px solid #000;
background: transparent;
text-align:center;
}
.col {
padding: 0;
border: 0;
outline: 1px solid #000;
outline-offset: 0;
}
.sub tr:hover td {
background: #fc0;
}
.sub {
table-layout: fixed;
border-collapse: collapse;
min-width: 100%;
padding: 0;
border: 0.5px solid #000;
}
.sub td {
padding: 5px;
border: 1px solid 0.5px;
text-align: left;
}
.sub td:first-of-type {
width: 70%;
border-left: 0;
}
.sub td:nth-of-type(2) {
width: 10%;
text-align: center;
}
.sub td:last-of-type {
width: 20%;
}
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Joe</td><td>37</td><td>Male</td></tr>
</table>
</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td class='col' colspan='3'>
<table class='sub'>
<tr><td>Jill</td><td>37</td><td>Female</td></tr>
</table>
</td>
</tr>
</tbody>
</table>
It is not fully possible without JS as CSS has no parent selector. A few browsers (Safari and Chrome Desktop) already included the :has()-selector but as said, it is not fully supported yet.
The closest thing you an do without scripting is to highlight all th in a row. That said, you can use the tr:hover selector to check for a hover on the entire row. This means the hover will also trigger if you hover the first 3 elements. The background-highlighting therefore will only be used on the th. To exclude the first row you can use the :not()-selector:
table tr:not(:nth-child(1)):hover th {
background-color: #e6e600;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td><button></button></td>
<td><button></button></td>
<td><button></button></td>
<th>Joe</th>
<th>37</th>
<th>Male</th>
</tr>
</table>
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
How can I organize and style this data on a split background using css and html?
that layout of yours (if that's what you want right?), you need to collapse your table border for that, to avoid white gaps. add a special class for tr that represents the thead and style it accordingly. follow the pattern with <tr><th></th><td></td></tr>. use text-align to center them with right to th and left to td.
td, th {
padding: 8px;
font-size: 12px;
width: 250px;
}
th { background: #E9EADA; text-align: right; }
td { background: #FCFCFC; text-align: left; }
.table-header > * {
font-size: 16px;
color: #238E98;
}
table { border-collapse: collapse; }
<table>
<tr>
<th>First name</th>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Doe</td>
</tr>
<tr class="table-header">
<th>Details</th>
<td>---</td>
</tr>
<tr>
<th>Age</th>
<td>33</td>
</tr>
</table>
I'm trying to rearrange a relatively large table (using CSS media query) after the width of a screen reaches a certain point and have it look like this (see image below) when the browser window is squished all the way through:
I've already succeed at deleting the unwanted rows, and getting the basic layout of it.
The Problem is:
the inline block elements below each day of the week need to fit the width of the table, and nothing has worked so far, not flex (maybe I'm not using it correctly) or overflow, or border-box.
HTML (just a table)
<table>
<thead>
<tr>
<th>DAY</th>
<th style="width:300px;">CLASS</th>
<th>TIME</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Speed biking</td>
<td>2pm-4pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Wednesday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Thursday</td>
<td>Speed biking</td>
<td>3pm-5pm</td>
<td>Register</td>
</tr>
<tr class="toBeDeleted">
<td>Friday</td>
<td colspan="3" class="noClasses">No classes</td>
</tr>
<tr>
<td>Saturday</td>
<td>Endurance biking</td>
<td>9am-1pm</td>
<td>Register</td>
</tr>
<tr>
<td>Sunday</td>
<td>Endurance biking</td>
<td>10am-4pm</td>
<td>Register</td>
</tr>
</tbody>
</table>
CSS (deletes 2 rows and the "thead", colors every first cell of each row and place that cell above the rest of it's respective row)
#media only screen and (max-width: 530px){
thead, .pasDeClasses{
display: none;
}
td:first-child{
background-color: #4080bc;
color: white;
font-family: Arial;
display: block;
}
tr > td{
border-left: 1px solid white;
max-width: 100%;
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
}
table{
min-width: 90%;
margin-left: auto;
margin-right: auto;
font-family: Arial;
}
}
thead{
background-color: #4080bc;
color: white;
}
td{
background-color: #d6d6d6;
padding-top: 10px; padding-bottom: 10px; padding-left: 30px; padding-right:
30px;
text-align: center;
}
You could try absolute-positioning only the last tr elements at the bottom of their parents. notice the position:relative, and display:block on the parent tr
tr{
display:block;position:relative;padding-bottom:20px
}
tr td:last-child{
position:absolute;bottom:0;
width:100%;height:20px
}
This works using the rule that an absolutely positioned element inside of a relatively positioned element will "dock" to the relatively positioned parent-element, rather than the viewport.
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.