I want to build a table with slanted column headers as shown in the image below.
But I am not able to align the slanted header div with actual column and the text is overflowing the column header. here is the link to my code.
My question is how do we align the slanted column header with the column below it and contain the text within it ?
Here is my code below
<table>
<tr>
<td>
<div class="outerDiv">
<div class="innerDiv">This is first column header </div>
</div>
</td>
<td>
<div class="outerDiv">
<div class="innerDiv">This is second column header</div>
</div>
</td>
<td>
<div class="outerDiv">
<div class="innerDiv">This is third column header</div>
</div>
</td>
</tr>
<tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
<tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
<tr> <td> 10 </td> <td> 11 </td> <td> 12 </td> </tr>
</table>
CSS:
.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
transform: skew(-30deg);
}
body, html {
height: 100%;
}
.innerDiv{
transform:skew(45deg);
writing-mode: vertical-lr;
}
body {
display: flex;
justify-content: center;
}
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
Here's another attempt. I changed the header cells to th. I added a translateX to get it to line up better. For the inside dev I reversed skewed it so the text didn't look funny and then rotated the container so it was still at a slant following the container. Also added some positioning to get it to look right.
https://jsfiddle.net/b1mrksou/3/
The CSS I added:
* {
box-sixing: border-box;
}
.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
border-bottom: 0;
border-left: 0;
transform: skew(-30deg) translateX(58%);
}
th:first-child .outerDiv {
border-left: 1px solid black;
position: relative;
}
.innerDiv {
position: absolute;
width: 250px;
height: 85px;
bottom: -34%;
left: 10px;
transform: skew(30deg) rotate(-60deg);
transform-origin: 0 0;
text-align: left;
}
This seems like the best solution I could come up with. http://jsbin.com/yecevosunu
<!doctype html><style>
table { border-collapse: collapse;}
td {border: 1px solid #000;}
</style><table class=tilttable>
<thead>
<tr>
<th>word</th>
<th>words and more and more words</th>
<th>two<br>words</th>
<th>word</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
<script>
function toDegrees (angle) {return angle * (180 / Math.PI);}
function toRadians (angle) {return angle * (Math.PI / 180);}
onload=function(){
var tilttables = document.getElementsByClassName('tilttable');
[].forEach.call(tilttables[0].rows[0].cells
, function (i) {
i.style.verticalAlign = "bottom";
i.innerHTML = "<div><div>" + i.innerHTML + "</div></div>";
i.firstChild.firstChild.setAttribute('style',"transform-origin:top left;transform: rotate(-45deg);");
tilt(i.firstChild.firstChild);
});
}
function tilt(d){
var w = d.clientWidth;
var h = d.clientHeight;
d.parentElement.style.width = h*Math.cos(toRadians(45))+"px";
d.style.whiteSpace="nowrap";
d.parentElement.style.paddingTop = w*Math.sin(toRadians(45))+"px";
d.parentElement.style.height = h*Math.sin(toRadians(45))+"px";
}
</script>
you could use writing-mode, a pseudo element, transform and some tunning with margins:
table {
margin-right: 6em;
}
th {
padding: 0;
position: relative
}
th>div {
white-space:nowrap;
margin: -1em -2em -1em 6em;/* tune this to your needs, you might also see & update transform-origin */
padding: 0;
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-lr;
writing-mode: tb-lr;
transform: scale(-1, -1) rotate(45deg);
}
th:before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid;
transform: skew(-45deg);
transform-origin: bottom left;
}
td {
border: solid;
}
<table>
<tr>
<th>
<div class="innerDiv"> first </div>
</th>
<th>
<div class="innerDiv">This is second column header</div>
</th>
<th>
<div class="innerDiv">This is third header</div>
</th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 999999999999999 </td>
</tr>
<tr>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
http://codepen.io/gc-nomade/pen/xqdNGN
Related
What I Want
With pure HTML and CSS, to have a table where each cell either:
has a border
contains an element that is the same size as the full cell
such that there are no visible gaps between cells.
Visually, I have the left but need the right
What I've Tried
I've tried playing around with setting various combinations of box-sizing and padding to no avail.
You can see one of my attempts at this JSFiddle.
You have added padding:0 to just the coloured cells. As the first cell still have padding, it is increasing all the row height.
If you add:
.rows-index {
border: 1px solid black;
padding: 0;
box-sizing: border-box;
}
You will notice there's still a white 1px line which is not white, It is the space the border of the first cell is taking (as before, increasing the row hight). It does not matter if use border-box in this table. All cells will have same height but the coloured divs won't fill that gap.
I would suggest to use outline insteed of border as a solution:
table {
border-collapse: collapse;
border-spacing: 0;
}
.cols-index, .rows-index {
outline: 1px solid black;
padding: 0;
box-sizing: border-box;
}
.table-cell {
padding: 0;
box-sizing: border-box;
}
.table-cell div {
width: 100%;
height: 100%;
display: inline-block;
box-sizing: inherit;
}
.purple { background-color: purple; }
.red { background-color: red; }
.lightblue { background-color: lightblue; }
<table xmlns="http://www.w3.org/1999/html">
<thead>
<tr>
<th class="top-left-cell"></th>
<th class="cols-index">Bish</th>
<th class="cols-index">Bash</th>
<th class="cols-index">Bosh</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows-index">First</td>
<td class="table-cell"><div class="purple">A</div></td>
<td class="table-cell"><div class="purple">B</div></td>
<td class="table-cell"><div class="purple">C</div></td>
<tr>
<tr>
<td class="rows-index">Second</td>
<td class="table-cell"><div class="red">D</div></td>
<td class="table-cell"><div class="red">E</div></td>
<td class="table-cell"><div class="red">F</div></td>
<tr>
<tr>
<td class="rows-index">Third</td>
<td class="table-cell"><div class="lightblue">G</div></td>
<td class="table-cell"><div class="lightblue">H</div></td>
<td class="table-cell"><div class="lightblue">I</div></td>
<tr>
</tbody>
</table>
Edited: your height:100%; in the coloured divs is not doing anything as the parent does not have a fixed height. If you don't want to use outline you could set the height of this divs to 19px which is the height of the first cell... the cell that set the height of your rows. However this "solution" is ugly as hell and won't work if anytime any cell has 2 lines of text.
Edited... again: or third option, using border would be to set a line-height to your coloured divs. This is much cleaner than the previous edited paragraph and it will work as a kind of padding: https://jsfiddle.net/654gu2sf/
You can 'extend' the cells' coloring a little with padding and border to fill up the blank spaces (which can be seen to correspond to the borders in the first column).
An adjusment has to be made in the first row in the table body which is not given a top 'extension'.
table * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.cols-index,
.rows-index {
border: 1px solid black;
}
.table-cell {
padding: 0;
box-sizing: border-box;
}
.table-cell div {
width: 100%;
height: 100%;
display: inline-block;
box-sizing: inherit;
}
.table-cell div {
padding: 1px;
background-color: var(--col);
border-top: var(--col) 1px solid;
border-bottom: var(--col) 1px solid;
}
.purple {
--col: purple;
}
.red {
--col: red
}
.lightblue {
--col: lightblue;
}
tbody tr:first-child td>div {
border-top-width: 0px;
}
td {
text-align: center;
}
.rows-index {
text-align: right;
}
<table xmlns="http://www.w3.org/1999/html">
<thead>
<tr>
<th class="top-left-cell"></th>
<th class="cols-index">Bish</th>
<th class="cols-index">Bash</th>
<th class="cols-index">Bosh</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows-index">First</td>
<td class="table-cell">
<div class="purple">A</div>
</td>
<td class="table-cell">
<div class="purple">B</div>
</td>
<td class="table-cell">
<div class="purple">C</div>
</td>
</tr>
<tr>
<td class="rows-index">Second</td>
<td class="table-cell">
<div class="red">D</div>
</td>
<td class="table-cell">
<div class="red">E</div>
</td>
<td class="table-cell">
<div class="red">F</div>
</td>
</tr>
<tr>
<td class="rows-index">Third</td>
<td class="table-cell">
<div class="lightblue">G</div>
</td>
<td class="table-cell">
<div class="lightblue">H</div>
</td>
<td class="table-cell">
<div class="lightblue">I</div>
</td>
</tr>
</tbody>
</table>
You can add the cellspacing attribute to to table tag to adjust spacing between cells.
To remove the spacing, set cellspacing=0.
td, th {
border: 1px solid black;
}
<table cellspacing=0>
<tr>
<th></th>
<th>bish</th>
<th>bash</th>
<th>bosh</th>
</tr>
<tr>
<td>first</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>second</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr>
<td>third</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
</table>
This question already has answers here:
header not being responsive when resizing
(3 answers)
Closed 4 years ago.
I have a table where when I resize it wont show my header Steps on the web view it does show perfectly - but when I resize I don't get to see my Steps header. is there way to fix this in my code below with css or jstl/jsf tags? thanks for the help. Something like this: https://imgur.com/a/cSRshbD
Image appears: https://imgur.com/a/JblB5t6
here is my code:
<table class="responsive-table">
<thead>
<tr class="table-header">
<th></th>
<c:forEach var="stepNumber" begin="1" end="#{testBean.jobEntity.stepSize}" varStatus="loop">
<c:if test="${loop.index lt 9}">
<th class="responsive-table-cell">Step #{stepNumber}</th>
</c:if>
</c:forEach>
</tr>
<c:forEach items="#{testBean.jobEntity.jobRows}" var="jobRow">
<tr class="responsive-table-item">
<td class="left-header">#{jobRow.rateType}</td>
<c:forEach items="#{jobRow.steps}" var="step" varStatus="loop">
<c:if test="${loop.index lt 8}">
<th class="left-header">#{step.amount}</th>
</c:if>
</c:forEach>
</tr>
</c:forEach>
</thead>
</table>
CSS:
table {
margin: auto;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 5px 10px;
}
tr {
border-bottom: 1px solid #ccc;
}
thead th {
border-bottom: 2px solid #ddd;
}
/* You will need to display:none the duplicated header in responsible-table-item*/
tr.responsive-table-item .responsive-table-cell {
display: none;
}
/* Add screen proportion or class when break occurs */
#media (max-width: 768px) {
/* Hide table headers */
.table-header {
display: none;
}
tr.responsive-table-item {
display: block;
}
tr.responsive-table-item .responsive-table-cell {
display: inline-block;
}
tr.responsive-table-item td:first-child {
background-color: #ccc;
display: block;
text-align: center;
width: 100%;
}
tr.responsive-table-item td,
tr.responsive-table-item th {
display: inline-block;
width: calc(50% - 22px);
/* Cell Border + padding*/
word-break: break-all;
vertical-align: top;
}
}
Based on w3schools https://www.w3schools.com/bootstrap/bootstrap_tables.asp
This might help you
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Steps</th>
<th>Hourly</th>
<th>Biweekly</th>
<th>Annual</th>
</tr>
</thead>
<tbody>
<tr>
<td>step 1</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
<tr>
<td>step 2</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
<tr>
<td>step 3</td>
<td> 0.0 </td>
<td> 0.0 </td>
<td> 0.0 </td>
</tr>
</tbody>
</table>
</div>
The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.
<table border="1" style="width:850px">
<tr>
<td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
<td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
</tr>
<tr style="vertical-align:top">
<td style="vertical-align:top">2.Row Cell 1</td>
</tr>
</table>
OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?
So there is your solution in the snippet below :
table , td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 3px;
width: 250px;
height: 150px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td style="height:1em">This is a test thank you for your attention</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Hope it help.
Adding a height: 1em; seemed to work - like this for the first cell:
<td style="width: 50%; vertical-align: top; height: 1em;">
This question already has answers here:
HTML -- two tables side by side [duplicate]
(4 answers)
Closed 6 years ago.
This is how the display currently looks:
This is how I want it to look:
.d1{
background:#F0F0F0;
border: 1px solid #A4A4A4;
}
#designs input, #itemz input{
height:19px;
font-size: 15px;
}
#designs #fds_image {
background-size: 190px 221px;
height: 221px;
width: 190px;
overflow:hidden;
}
#designs #fds_image img{
width: 190px;
}
<table id="designs" width="auto" align="center" border="0" bgcolor="#EBEBEB" cellspacing="5">
<tbody>
<tr>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
<br>
<tbody>
<td class="d1" name="item">
<div id="fds_image">
<button class="preview_switch">M</button>
</div>
</div>
<hr>
<div class="bottom_bar">
<button name="preview" data-original="m">Preview</button>
I tried to do many things and researched online, but for some reason, it is not working. How can I make the tables display side-by-side, like I've shown?
You can override the default display: table to inline-table.
table {
display: inline-table;
}
Example of horizontally align multiple <table> elements.
body {
text-align: center;
}
table {
width: 100px;
height: 200px;
border-collapse: collapse;
display: inline-table;
}
td {
border: 1px solid grey;
}
tr:first-child {
height: 100%;
}
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Content</td>
</tr>
<tr>
<td><button>Button</button></td>
</tr>
</tbody>
</table>
You could try floating the tables.
table {
float: left;
}
You can make a bigger table that holds both of your tables currently side by side.
<table style="margin: auto;">
<tbody>
<tr>
<td><!-- Your first table --></td>
<td><!-- Your second table --></td>
</tr>
</tbody>
</table>
Firstly, this is a duplicate question: Equal-height scaling cells in an html table
The user that asked the question above didn't get a solution for the same issue I'm having.
Within the JSFIDDLE you will notice a cell with a red background. This cell is the highest and I need all other cells to pick up the highest cell height and span to the corresponding cell height.
The solution cannot contain fixed heights as this must be dynamic
Here is a mock up of what I'm trying to achieve: http://jsfiddle.net/pAz6G/
Here is HTML:
<table class="left" cellspacing="0" borderspacing="0" >
<tr>
<td>
<h2>Very Servere</h2>
<p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
<ul>
<li>Heavy salt deposits</li>
<li>The almost constant smell of saly spray in the air.</li>
<li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
</ul>
<p>This environment may be extended inland by revailing winds and local coniditions</p>
</td>
</tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
<tr>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td class="red">Rain washing plus manual washing every 3 months</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
</tr>
</table>
Here is CSS:
/* Column Styling */
.left {
float: left;
width: 350px;
}
.left td {
padding: 10px;
}
.right {
float: left;
width: 400px;
}
/*********************************************/
/* General Styling */
.no-padding {
padding: 0;
}
td {
background: grey;
color: white;
vertical-align: top;
}
p {
margin: 0;
}
.red {
background: red;
}
/*********************************************/
/* Section Styling */
.section {
border-left: 1px solid #fff;
}
.section-heading {
display: block;
padding: 10px;
}
/*********************************************/
/* Nested Tables */
.inner {
width: 100%;
}
.inner td {
border-top: 1px solid #fff;
padding: 10px;
}
/*********************************************/
Instead of using multiple tables, try using one table.
Keeping it simple :)