I would like some help, please, to align data in a table starting at specific columns and aligning to the left.
All data needs to be aligned to the left in the 3 specific columns shown, and should wrap any data that doesn't align.
Please see the current code below.
How can I change this?
I would like the following configured in the Table:
Column 1 to be a maximum of 10 characters.
Column 2 a maximum of 50 characters.
Column 3 a maximum of 10 characters.
All left aligned.
And any data that is inserted beyond the characters above should wrap.
body {
background-color: powderblue;
}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>123245</th>
<th>This is a description of item 1</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>678910111213</th>
<th>This is a description of item 2 and it is longer than description 1</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
Thanks in advance for any help provided.
I've added a bit of CSS to make this work:
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
width: 10ch;
}
The ch unit which is based on the 0 glyph width is not perfect, which is why the 50-character limit is actually 42ch in the CSS code.
body {background-color: powderblue;}
code {
background: #2db34a;
border-radius: 6px;
color: #fff;
display: block;
font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
padding: 24px 15px;
text-align: center;
}
header,
section,
aside,
footer {
margin: 0 1.5% 24px 1.5%;
}
section {
float: left;
width: 30%;
}
footer {
clear: both;
margin-bottom: 0;
}
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
width: 10ch;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>Thisis10ch</th>
<th>This is an easy good nice well 50 character string</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>Thisis10ch wrapped</th>
<th>This is an easy good nice well 50 character string wrapped</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
</body>
</html>
You may take a look at table-layout and vertical-align properties .
Possible example:
body {
background-color: powderblue;
}
table {
table-layout: fixed;
text-align: left;
border-spacing:0.5em;
}
tr>* {
max-width: 10ch;
word-break: break-all;
vertical-align:top;
}
tr>*:nth-child(2) {
max-width: 50ch;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>123245</th>
<th>This is a description of item 1</th>
<th>100</th>
<th class="right">Item 4</th>
</tr>
<tr>
<th>678910111213</th>
<th>This is a description of item 2 and it is longer than description 1</th>
<th>1000</th>
<th class="right">Item 4</th>
</tr>
</table>
One approach is as follows:
body {
background-color: powderblue;
}
/* to allow the browser to split words at any point when
required to allow for a line-break: */
td {
word-break: break-all;
}
/* selecting any element that is a <th> or a <td> that
does not match the '.right' selector: */
:is(th, td):not(.right) {
/* aligning text to the logical inline start,
in a left-to-right language (such as English)
that is equivalen to 'text-align: left': */
text-align: start;
}
/* selecting all <th> and <td> elements that are
the :first-child, or the :nth-child(3),
of it's/their parent: */
:is(th, td):is(:first-child, :nth-child(3)) {
/* there are no CSS sizes exactly equal to '1 character'
as characters vary enormously in their sizing; the 'ex'
unit is equal to the width of the lower-case 'x'
character, which allows for a near-match on average to
10 characters wide (though ch is another option): */
max-width: 10ex;
}
/* selecting all <th> and <td> elements that are the second-
child of their parent: */
:is(th, td):nth-child(2) {
/* setting the width to 50ex, the width of 50 lowercase 'x'
characters to approximate a 50 character length: */
max-width: 50ex;
}
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th class="right">Item 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>123245</td>
<td>This is a description of item 1</td>
<td>100</td>
<td class="right">Item 4</td>
</tr>
<tr>
<td>678910111213</td>
<td>This is a description of item 2 and it is longer than description 1</td>
<td>1000</td>
<td class="right">Item 4</td>
</tr>
</tbody>
</table>
References:
CSS Values and Units: Lengths.
:first-chil.
:is.
:not().
:nth-child().
text-align.
word-break.
You can idea from here and try to learn HTML table. it's a very important thing.
HTML:
<table>
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th>Quantity</th>
<th>Item 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>123245
<td>This is a hello world description of item 1</td>
<td>10045467643456457647345456363653</td>
<td>Item 4</td>
</tr>
<tr>
<td>5463463
<td><a href="#">Visitors will now see your public and anonymized private
contributions.
Visitors will now see your public and anonymized private contributions.
</a></td>
<td>1004546764345645764734</td>
<td>Hello test 4</td>
</tr>
</tbody>
</table>
CSS:
body {
background-color: powderblue;
}
table * {
text-align: left;
word-break: break-all;
}
table thead th:first-child,
table tbody tr td:first-child {
width: 50px;
}
table thead th:nth-child(1) {
width: 200px;
}
table thead th:nth-child(2) {
width: 200px;
}
table thead th:nth-child(3) {
width: 200px;
}
table thead th:last-child,
table tbody td:last-child {
width: 100px;
text-align: right;
}
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 have a table like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>
Well, this table is pretty wide. And now I have to make a stylesheet that would make the site appropriate for viewing on a narrow screen, like a mobile phone. So I have to do sth with this wide table.
I was thinking if this table could display vertically, not horizontally. More specifically, I was thinking if it could display more like this:
<ul>
<li><strong>John Doe:</strong>
<ul>
<li><em>Phone no.:</em> 00123456789</li>
<li><em>Address:</em> Morgue St. 21</li>
<li><em>Wealth:</em> $100,000</li>
</ul>
</li><li><strong>Mary Sue:</strong>
<ul>
<li><em>Phone no.:</em> 00987654321</li>
<li><em>Address:</em> Impossible St. 12</li>
<li><em>Wealth:</em> $999,999,999,999,999</li>
</ul>
</li><li><strong>Cpt. Kirk:</strong>
<ul>
<li><em>Phone no.:</em> 00999999999</li>
<li><em>Address:</em> Enterprise St. 22</li>
<li><em>Wealth:</em> $100,000,000 </li>
</ul>
</li>
</ul>
Now, I surely could make a Javascript that would transform the table code from the first snippet to the list code from the second snippet. But I wonder, if this is necessary? Is it possible to make a CSS stylesheet that, when attached to the table code from the first snippet would make it look like the second snippet?
Sure, you can play with media queries and change the display of the table :
See this fiddle
#media(max-width: 640px){
table, table td, table tr, table th { display: block; text-align: left; }
table th, table td { margin: 0; padding-left: 25px; }
table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
table thead { display: none; }
}
td, th {
text-align: left;
display: block;
float: left;
width: 100%;
}
thead {
display: none;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>
Here's a possible way without the <thead> elements, but you could create hidden elements before each person, e.g. <span class="hidden">Name:</span> Cpt. Kirk and then enable all the hidden elements with media queries. Not the most elegant solution, I'd probably prefer JS for this.
There might be better ways to do this, but here is a solution to reach the goal:
table thead{
display:none;
}
table tbody tr th{
display:block;
text-align: left;
}
table tbody tr td{
display:block;
margin-left:20px;
}
table tbody tr th::before{
content:"• ";
}
table tbody tr td::before{
content:"◊ ";
}
Find a working example: https://jsfiddle.net/ktnurvfr/
You can change the table elements to display block and force them to act like block elements just add this class to your table.
.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
.vertical-table thead{
display:none;
}
.vertical-table tr, .vertical-table th, .vertical-table td{
display:block;
width:100%;
}
<table class="vertical-table">
<thead>
<tr>
<th>Name</th>
<th>Phone no.</th>
<th>Address</th>
<th>Wealth</th>
</tr>
</thead>
<tbody>
<tr>
<th>John Doe</th>
<td>00123456789</td>
<td>Morgue St. 21</td>
<td>$100,000</td>
</tr><tr>
<th>Mary Sue</th>
<td>00987654321</td>
<td>Impossible St. 12</td>
<td>$999,999,999,999,999</td>
</tr><tr>
<th>Cpt. Kirk</th>
<td>00999999999</td>
<td>Enterprise St. 22</td>
<td>$100,000,000</td>
</tr>
</tbody>
</table>
you can use this code :
#media(max-width: 640px){
table, table td, table tr, table th { display: block; text-align: left; }
table th, table td { margin: 0; padding-left: 25px; }
table td { margin-left: 40px;list-style: square; display: list-item; padding-left: 0; }
table thead { display: none; }
}
i will be work.
I had the same problem. During my search I encountered this elegant solution by sergiopinnaprato: http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table
On smaller screens it changes the table to a single column. Very readable solution using only html and css code:
HTML:
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-striped table-condensed cf">
<thead class="cf">
<tr>
<th>Code</th>
<th>Company</th>
<th class="numeric">Price</th>
<th class="numeric">Change</th>
<th class="numeric">Change %</th>
<th class="numeric">Open</th>
<th class="numeric">High</th>
<th class="numeric">Low</th>
<th class="numeric">Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Code">AAC</td>
<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
<td data-title="Price" class="numeric">$1.38</td>
<td data-title="Change" class="numeric">-0.01</td>
<td data-title="Change %" class="numeric">-0.36%</td>
<td data-title="Open" class="numeric">$1.39</td>
<td data-title="High" class="numeric">$1.39</td>
<td data-title="Low" class="numeric">$1.38</td>
<td data-title="Volume" class="numeric">9,395</td>
</tr>
<tr>
<td data-title="Code">AAD</td>
<td data-title="Company">ARDENT LEISURE GROUP</td>
<td data-title="Price" class="numeric">$1.15</td>
<td data-title="Change" class="numeric">+0.02</td>
<td data-title="Change %" class="numeric">1.32%</td>
<td data-title="Open" class="numeric">$1.14</td>
<td data-title="High" class="numeric">$1.15</td>
<td data-title="Low" class="numeric">$1.13</td>
<td data-title="Volume" class="numeric">56,431</td>
</tr>
</tbody>
</table>
</div>
CSS:
#media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#no-more-tables tr { border: 1px solid #ccc; }
#no-more-tables td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
}
#no-more-tables td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-tables td:before { content: attr(data-title); }
}
Hope this helps!
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>