I'm trying to accomplish align numbers horizontally center in the box but with the digits right aligned like in this image:
If you think i should try different method please suggest me.
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
th,td {
padding: 2px 5px 2px 5px;
text-align: center;
}
span {
display: inline-block;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>11</span></td>
</tr>
<tr>
<td><span>12</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Number will be dynamic (Between one to four characters)
I added borders so you can see how I did it.
Align the td content to center.
Align the td > span content to right, at give it small width.
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
td {text-align: center; border: 1px solid red;}
td span {
padding: 0;
text-align: right;
border: 1px solid blue;
width: 31px;
}
span {
display: inline-block;
text-align: right;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>10</span></td>
</tr>
<tr>
<td><span>1122</span></td>
</tr>
<tr>
<td><span>112</span></td>
</tr>
</tbody>
</table>
</body>
</html>
In addition to the solution above, I have to say that for this case, it could be a good idea to use a monospace font.
Another option that doesn't need setting explicit size (so will work with any font and/or digits number):
* {
margin:0;
padding:0;
}
.table{
width: 70px;
border-collapse: collapse;
border-width: 0;
}
tbody tr:nth-child(odd) { background: #eee; }
th,td {
padding: 2px 5px 2px 5px;
text-align: right;
}
tbody tr::before, tbody tr::after {
content: '';
display: table-cell;
width: 50%;
}
<html>
<head>
<link rel="stylesheet" href="check.css">
</head>
<body>
<table class="table">
<thead>
<tr>
<th colspan="3">Numbers</th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
<tr>
<td>11</td>
</tr>
<tr>
<td>12</td>
</tr>
</tbody>
</table>
</body>
</html>
The trick is in adding two "pseudo cells" to each row that take half the available width each.
I went through the same problem and came across the following suggestions which I dont find to be optimal
Use extra padding on both sides of the column (what about responsiveness?)
Use extra columns (semantics anyone?)
Put a table inside a td (performance anyone?)
After going through every nook and corner, I believe I have the optimal solution to this problem
Flexbox to the rescue!!!
Simple trick: Just add a span inside a td that acts as a flexbox container and has 2 span children with both your content pieces inside. Your column could be any size and this still works like a charm!
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
html, body{
width: 100vw;
min-height: 100vh;
}
body{
display: flex;
flex-direction: column;
}
#content{
flex: 1;
display: flex;
flex-direction: row;
}
#left, #right{
flex: 2;
}
#center{
flex: 6;
}
table{
border: 1px solid #ddd;
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
table th,
table td {
padding: 0.75rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
}
table thead th {
vertical-align: bottom;
border-bottom: 2px solid #e9ecef;
}
td{
text-align: center;
}
span.left{
flex: 1;
background: lightcoral;
text-align: right;
}
span.right{
flex: 1;
background: lightblue;
text-align: left;
}
.flexwrap{
display: flex;
flex-direction: row;
}
</style>
<body>
<div id= "content">
<div id = "left"></div>
<div id = "center">
<table>
<thead>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>Item 1</td>
<td>
<span class="flexwrap">
<span class = 'left'>
13737
</span>
<span class = 'right'>
.9
</span>
</span>
</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
<tr>
<td>
1
</td>
<td>Item 2</td>
<td>
<span class="flexwrap">
<span class = 'left'>
2
</span>
<span class = 'right'>
.34000004
</span>
</span>
</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
<td>Table Cell</td>
</tr>
</tbody>
</table>
</div>
<div id = "right"></div>
</div>
</body>
I colored the spans so that you can see them in the output. Hope that helps
Related
The border disappears when scrolling. I want the border to appear. How can I do this? Or how can I start the scroll only from the scrolled part?
HTML - Table Structure
<div class="wrapper">
<table>
<thead>
<th class='fix'>Fixed</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th class='fix'>Fixed</th>
</thead>
<tbody>
<tr>
<td class='fix'>First Content</td>
<td>A1</td>
<td>A2 (with longer content)</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td class='fix'>Last Content</td>
</tr>
</tbody>
</table>
</div>
CSS - Table CSS
.wrapper {
overflow-x:scroll;
width:100%;
}
table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
background: white;
}
thead {
font-family: arial
}
tr {
border-bottom: 1px solid #ccc;
}
td, th {
vertical-align: top;
text-align: left;
width:100px;
padding: 5px;
border: 1px solid red;
}
.fix {
position:sticky;
background: white;
}
.fix:first-child {
left:0;
width:120px;
}
.fix:last-child {
right:0;
width:120px;
}
Play with code: https://jsbin.com/marezen/1/edit?html,css,output
In order to have fixed table borders you need to:
remove border-collapse from css
table {
table-layout: fixed;
width: 100%;
/*border-collapse: collapse;*/
background: white;
}
Also add cellspacing="0" to remove the cellspacing
<table cellspacing="0">
for having same borders like your example, combined with my solution:
CSS-
.wrapper {
overflow-x:scroll;
width:100%;
}
table {
table-layout: fixed;
width: 100%;
/* border-collapse: collapse; */
background: white;
border-top:1px solid red;
/* border-left:1px solid red; */
}
thead {
font-family: arial
}
tr {
/* border-bottom: 1px solid #ccc; */
}
td, th {
vertical-align: top;
text-align: left;
width:100px;
padding: 5px;
/* border: 1px solid red; */
border-right:1px solid red;
border-bottom:1px solid red;
}
.fix {
position:sticky;
background: white;
border-left:1px solid red;
}
.fix:first-child {
left:0;
width:120px;
}
.fix:last-child {
right:0;
width:120px;
}
td:nth-child(6),
th:nth-child(6){
border-right:none;
}
HTML-
<div class="wrapper">
<table cellspacing="0">
<thead>
<th class='fix'>Fixed</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th class='fix'>Fixed</th>
</thead>
<tbody>
<tr>
<td class='fix'>First Content</td>
<td>A1</td>
<td>A2 (with longer content)</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td class='fix'>Last Content</td>
</tr>
<tr>
<td class='fix'>First Content (with longer content)</td>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td class='fix'>Last Content</td>
</tr>
<tr>
<td class='fix'>First Content</td>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td class='fix'>Last Content (with longer content)</td>
</tr>
</tbody>
</table>
</div>
The solution is to add border-left to the wrapper. Then I removed the border property from td, tr and instead added border selection to them like border-top in order to remove the wrapper's border overlapping those borders.
https://jsbin.com/niluyefacu/edit?html,css,output
I have this code to make td's odds and evens background color For ROWS
so if someone got a new high score number a new td will be added
and be colored automatically
It's not working like you see in the screenshot. Wwhat's the solution?
th {
height: 30px;
margin-top: 15px;
background-color: white;
}
tr {
background-color: #fff;
padding: 20px;
font-size: 20px;
}
tr:nth-child(even) {
background: #f3f1f1
}
<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>AAA </td>
<td>1</td>
</tr>
<tr>
<td>BBB </td>
<td>2</td>
</tr>
<tr>
<td>CCC </td>
<td>3</td>
</tr>
</table>
You are using the style on the td tag. That's why it's not working
Use it in tr
tr {
background-color: #c4c4c4;
}
If you want the ROWS to change colour, then use the CSS on the rows
th {
height: 30px;
margin-top: 15px;
background-color: white;
}
tr {
background-color: #fff;
padding: 20px;
font-size: 20px;
}
tr:nth-child(even) {
background: #f3f1f1
}
<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Name 1</td>
<td>Score 1</td>
</tr>
<tr>
<td>Name 2</td>
<td>Score 2</td>
</tr>
</table>
I have a div that wraps a table and I added width:max-content to it so that scrollbar will stick to the side of the table whatever width it gets based on it's content. It works well on Chrome but doesn't work the same with Firefox (94.0.1). Is there a different way to do this in Firefox?
I also tried adding white-space: nowrap but horizontal scrollbar appears.
Here is my CSS and html (I am using bootstrap):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SAMPLE</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.form-container {
font-size: 16px !important;
margin: 20px auto;
font-family: auto !important;
}
.div-container {
font-size: 16px !important;
margin-bottom: 15px;
margin: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
min-height: 12px;
border-width: 1px;
border-style: solid;
}
h3{
font-size: 30px;
}
.tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: auto; max-width: 100%;}
#supports(width: max-content){
.tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: max-content; width: -moz-max-content; max-width: 100%;}
}
table {
width: auto !important;
text-align: center;
border-collapse: separate;
border-spacing: 0;
}
.margin-bottom-sm{
margin-bottom: 1px;
}
table th {
border-top: 1px solid;
border-bottom: 1px solid;
border-right: 1px solid;
}
.tableDiv thead th {
position: sticky;
top: 0;
z-index: 1;
background-color: #fefefe;
}
</style>
</head>
<body>
<div style="width: 1536px;">
<div class="form-container">
<div class="div-container">
<div style="padding-bottom: 15px">
<h3><strong>SAMPLE PAGE</strong></h3>
</div>
<div class="tableDiv" style="display: inline-block;" >
<table class="table table-bordered margin-bottom-sm">
<thead>
<tr>
<th scope="col">No.</th>
<th scope="col">Company</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td> Company Name 0</td>
</tr>
<tr>
<td>2</td>
<td> Company Name 1</td>
</tr>
<tr>
<td>3</td>
<td> Company Name 2</td>
</tr>
<tr>
<td>4</td>
<td> Company Name 3</td>
</tr>
<tr>
<td>5</td>
<td> Company Name 4</td>
</tr>
<tr>
<td>6</td>
<td> Company Name 5</td>
</tr>
<tr>
<td>7</td>
<td> Company Name 6</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
<tr>
<td>8</td>
<td> Company Name 7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Chrome:
Firefox (94.0.1):
It's a valid bug related to oveflow:auto. Refer https://bugzilla.mozilla.org/show_bug.cgi?id=764076
Here is the clear minimal reproducible example. Behaves different on Chrome and Firefox.
They are implementing scrollbar-gutter property which will fix this.
For now, you can use overflow-y: scroll; on Firefox.
.tableDiv {
overflow-y: scroll; /* <-- show scroll */
max-height: calc(90vh - 210px);
width: auto;
max-width: 100%;
}
#supports(width: max-content) {
.tableDiv {
overflow-y: scroll; /* <-- show scroll */
max-height: calc(90vh - 210px);
width: max-content;
width: -moz-max-content;
max-width: 100%;
}
}
This discussion might help for making it browser specific.
Note: overflow-y: scroll will always show scroll bar, even if content is smaller than the container size.
table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}
tbody tr{border:2px solid #256ac4;}
td{ color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
i have coded this, expected result is in image but i am unable to add space between two rows, if i use border-collapse:seperate then space is coming but border is not applying.
https://ibb.co/b9WDn5
In the parent table, try setting
border-collapse:separate;
border-spacing:5em;
Try to refer this .
You should add a div where your content goes and style it to create the gap between rows.
So if we take the code from you example it will turn out like this.
HTML
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
padding: 0;
}
td div {
margin-bottom: 10px;
border: 2px solid #256ac4;
}
td:first-child div {
border-left-width: 2px;
}
td:last-child div {
border-right-width: 2px;
}
thead {
border: solid 1px #000;
}
th {
text-align: left
}
https://jsfiddle.net/nvbza1u3/1/
Note how the border was added to the div and not the tr. Also I added the border to thead to make it look more like your example
I have fix this issue with float:left , check with this snippet
* { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border: solid 1px #000;
border-collapse: collapse;
float:left;
}
thead {
float: left;
}
tbody tr {
border: 2px solid #256ac4;
float: left;
margin-bottom: 15px;
width: 100%;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
}
th {
text-align: left
}
<body>
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
I have a table that can slide left or right when the screen is narrow enough. The first column is positioned absolute so that it is always visible.
Is it possible to make the cells in the first column maintain the size of the cells in the other columns? I am not sure how to achieve this while keeping the first column frozen.
Here is a fiddle to my code: http://jsfiddle.net/ta945/
Here's the HTML and CSS
HTML:
<div>
<table>
<thead>
<tr>
<th class="sticky">Name</th>
<th>Helpful Services</th>
<th>State</th>
<th>City</th>
<th>Phone</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">First Name</td>
<td>Math</td>
<td>CO</td>
<td>San Francisco</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Second Name</td>
<td>Reading</td>
<td>NY</td>
<td>New York City</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Third Name</td>
<td>Art</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
<tr>
<td class="sticky">Four Name</td>
<td>Programming</td>
<td>IL</td>
<td>Chicago</td>
<td>123-456-7890</td>
<td>http://somewhere.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
div {
width: 100%;
border: 1px solid #000000;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
table {
border-collapse: seperate;
border-spacing: 0;
margin-left: 5em;
}
thead, tbody, tr {
vertical-align: middle;
}
th {
font-weight: bold;
padding: 2px 4px;
background-color: #676767;
color: #FFFFFF
}
td {
padding: 2px 4px;
}
tbody tr:nth-child(even) td {
background-color: #cccccc;
}
.sticky {
position: absolute;
left: 0;
top: auto;
margin-left: 9px;
}