HTML-CSS- Table rows not working as expected - html

This is my code:
.MainTable {
width: 100%;
height: 100%;
}
.SecondRow {
background-color: blue;
height: 100%;
width: 100%;
}
.TopRow {
background-color: green;
height: 25px;
width: 100%;
}
<table class="MainTable">
<tr class="TopRow">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="SecondRow">
<td class="Tags"></td>
<td>
<table class="ContentTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="Stats"></td>
</tr>
</table>
As you can see the second row is not extending to its full extent. And why are the tds not equally spaced?
I want the second row to occupy the full width and 100% height too. But as you can see, only some of it is showing. The second row is not occupying the full width and height. What am I doing wrong?


You can use the colspan="2" attribute on the <td>
.MainTable {
width: 100%;
height: 100%;
}
.SecondRow {
background-color: blue;
height: calc(100vh - 25px);
width: 100%;
}
.TopRow {
background-color: green;
height: 25px;
width: 100%;
}
<table class="MainTable">
<tr class="TopRow">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="SecondRow">
<td class="Tags" colspan="3"></td>
<td colspan="1">
<table class="ContentTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<td class="Stats"></td>
</tr>
</table>

Related

How can I overlap a table row over another?

This is just taking the content width and what I need is the entire "Overlap this" row to move on top of the previous row and using the width of its predecessor. Any hint on how to solve this?
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block, width: 100%; margin-top: -25px">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

Style the table data <td> tag, instead of the table row <tr>. Check the code below.
<table>
<tbody>
<tr style="background: azure; position: absolute; display: block;">
<td colspan="3" style="width: 150px;">Overlap this</td>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

table tbody {
position: relative;
}
table tbody tr:nth-child(2) {
background: azure;
position: absolute;
display: block;
width: 100%;
margin-top: -25px;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr>
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

tbody {
width: 100%;
}
tr {
width: inherit;
}
<table>
<tbody style="position:relative">
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value3</td>
</tr>
<tr style="background: azure; position: absolute; display: block; top:0 ">
<td colspan="3">Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

In your style list you have a small mistake. Instead , you need semicolon ; after: ...display: block, <-- small bug :-) ...
<tr style="background: azure; position: absolute; display: block; width: 100%; margin-top: -25px">
.ovl {
background: azure;
position: absolute;
display: block;
width: 100%; margin-top: -25px
}
tbody {
position: relative;
}
<table>
<tbody>
<tr>
<td>Value1</td>
<td>Value2</td>
<td>Value33</td>
</tr>
<tr class="ovl">
<td colspan="3" >Overlap this</td>
</tr>
<tr>
<td>ValueA</td>
<td>ValueB</td>
<td>ValueC</td>
</tr>
</tbody>
</table>

How can i achieve a table like this?

I tried using boxed elements but it is not coming in a proper way!
Any kind of help is highly appreciated
https://codepen.io/saisree/pen/EXXQGO - link to codepen
<table>
<tr>
<td class="text-center" colspan="4">Aircraft Status Display</td>
</tr>
<tr>
<td> spare</br>STBY</td><td><div class="vr"></div>
</td>
</tr>
<tr>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
<td style="width:80px;" ><p style="padding-top:20px;padding-bottom:20px;" class="boxed4 text-center"
><span class="br"></span></p>
</td>
</table>

Using colspan=n to make a column the width of n columns:
<table>
<tr>
<td></td><td colspan="6">this is wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td colspan="6">another wide column</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>

It's not completely clear from your image what you are trying to achieve, but if you mean the "half-open" cells, here is an example.
It uses col-spans to merge several cells into one, and different border settings: First a default setting for all cells (for borders on each side), the therse are overwritten by additional CSS rules that have special CSS selectors (with pseudo classes) to only affect certain cells:
table {
border-collapse: collapse;
width: 60%;
margin: 0 auto;
}
td {
border: 1px solid #333;
height: 40px;
}
tr:first-of-type > td {
border-bottom: none;
height: 20px;
}
tr:nth-of-type(2) > td {
border-top: none;
height: 40px;
}
tr:nth-of-type(4) > td:not(:first-child) {
border-bottom: none;
}
tr:nth-of-type(5) > td:not(:first-child) {
border-top: none;
}
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="4" ;></td>
</tr> <tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

img inside table row with tr width

How can I do this with CSS?
https://jsfiddle.net/ou8sdfLo/
I want to put an <img> inside a <tr> with a widh equal to its <tr>.
I hope it is clear enough.
I modified the image to match the code.

The image needs to be in a td, and if you want that td to span the entire width of the tr use the colspan attribute. Then if you want the img to fill the width of the td, use display: block; width: 100%;
table {
border-collapse: collapse;
}
tbody tr:hover {
background: #eee;
}
td:first-child {
text-align: left;
}
th {
background: #888;
color: white;
}
td,
th {
padding: 0.75em;
text-align: center;
}
img {
width: 100%;
display: block;
}
<table>
<tr>
<th>Model</th>
<th>Max speed</th>
<th>Power</th>
<th>Swept volume</th>
<th>Weight</th>
</tr>
<tr>
<td>Car 1</td>
<td>45 mph (72 km/h)</td>
<td>22 hp</td>
<td>2865 ccm</td>
<td>800 kg</td>
</tr>
<tr>
<td colspan="5"><img src="http://placehold.it/350x150" alt="car_preview"></td>
</tr>
<tr>
<td>Car 2</td>
<td>45 mph (72 km/h)</td>
<td>22 hp</td>
<td>2865 ccm</td>
<td>800 kg</td>
</tr>
</table

The only valid tag within a <tr> is <td>.
In the <img> row, you would need to set a colspan on your <td> equal to the total number of columns.
Like this:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

Facing issue with display:flex, should I use float instead

I'm working on a small dream project. Dream is to enable play chess online. As part one of this project I want to have a client-side chessboard widget that is firstly accessible for blind. I'm not good at css at all and need some help.
I've written javascript to generate 3 things
An unordered list with labels for rows (or ranks as one would call it in chess terms).
A board which I want adjacent to the list of rank labels.
An unordered list of column labels (or files as one would call it in chess terms). I would like have this arranged horizontally underneath the chessboard.
I have managed to generate markup using javascript and got it to show up on the page. Additionally, I have keyboard events attached to the board which allow me to navigate the board announcing the rank label and file label for a square.
Here is what gets rendered on the page:
<div id="main">
<div class="boardWrapper">
<div class="upperSection">
<ul class="rankLabels leftLabelSpace" id="rank">
<li id="rank_0">8</li>
<li id="rank_1">7</li>
<li id="rank_2">6</li>
...
<li id="rank_7">1</li>
</ul>
<table role="grid" class="board rightBoardSpace" id="chessBoard">
<!--8x8 gridcells here-->
</table>
</div>
<div class="lowerSection">
<div class="leftLabelSpace"><!--empty div--></div>
<ul id="file" class="fileLabels rightBoardSpace">
<li id="file_0">a</li>
<li id="file_1">b</li>
<li id="file_2">c</li>
...
<li id="file_7">h</li>
</ul>
</div>
</div>
</div>
Here is the css I'm playing around with. Somehow I can't get the UI rendered as shown in this image of chess board.
#main {
width: 100%;
height: auto;
}
.boardWrapper {
margin-left: auto;
margin-right: auto;
width: 560px;
height: 560px;
display: flex;
}
.upperSection {
flex: 1;
display: flex;
width: 100%;
}
.lowerSection {
clear: left;
display: flex;
width: 100%;
height: 5em;
}
.leftLabelSpace {
width: 5em;
height: 100%;
}
.rankLabels {
list-style-type: none;
}
.rankLabels li {
text-align: center;
vertical-align: middle;
font-weight: bold;
height: 12.5%;
}
.fileLabels {
list-style-type: none;
flex: 1;
}
.fileLabels li {
float: left;
text-align: center;
vertical-align: middle;
font-weight: bold;
width: 12.5%;
}
.board {
table-layout: fixed;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0px;
height: 100%;
width: 100%;
}
Can someone help me understand how floats and flex work? I'm bad at css. If anyone is interested, they can contribute a solution on axchessible github repository.
Thanks in advance!

You can create this with only a table. You don't need to use lists.
jsfiddle: https://jsfiddle.net/2dkjcoqp/
#main {
width: 100%;
height: auto;
}
.boardWrapper {
margin-left: auto;
margin-right: auto;
width: 560px;
height: 560px;
}
.board {
table-layout: fixed;
border: none;
border-collapse: collapse;
border-spacing: 0px;
height: 100%;
width: 100%;
}
table.board tr td {
border: 1px solid black;
}
table.board tr:nth-of-type(odd) td:nth-of-type(odd),
table.board tr:nth-of-type(even) td:nth-of-type(even) {
background-color: white;
}
table.board tr:nth-of-type(even) td:nth-of-type(odd),
table.board tr:nth-of-type(odd) td:nth-of-type(even) {
background-color: black;
}
<div id="main">
<div class="boardWrapper">
<table role="grid" class="board" id="chessBoard">
<tr>
<th id="rank_0">8</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_1">7</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_2">6</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_3">5</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_4">4</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_5">3</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_6">2</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th id="rank_7">1</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<th id="file_0">a</th>
<th id="file_1">b</th>
<th id="file_2">c</th>
<th id="file_3">d</th>
<th id="file_4">e</th>
<th id="file_5">f</th>
<th id="file_6">g</th>
<th id="file_7">h</th>
</tr>
</table>
</div>
</div>

CSS - create table with fixed size and custom column sizes

I have created these CSS classes:
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
And this table:
<table class="table-c">
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Table is fixed size as I wanted, but I also need to have different columns have different width. Those columns should not change with and always have it fixed. And also rows height should be fixed.
As in this example:
Here is my try:
http://jsfiddle.net/cbafseq6/
As you can see all columns have same width and all rows same height. If I would try for example set height on specific tr element (like style="height: 20px") all rows would still have same height.

If you want every row to have specific height and every column to have specific width, you can do something like the code below. I used your own code. You can tell me if that helps.
.table-c {
border: 1px solid black;
width:100%;
height: 30px;
table-layout: fixed;
}
.table-c td {
border: 1px solid black;
padding: 10px;
}
<table class="table-c">
<tr>
<td style="width: 10%">REFERENCE NO.</td>
<td style="width: 30%">DESCRIPTION</td>
<td style="width: 10%">Invoice DATE</td>
<td style="width: 10%">INVOICE AMOUNT</td>
<td style="width: 20%">DISCOUNT TAKEN</td>
<td style="width: 20%">AMOUNT PAID</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table class="table-c">
<tr>
<td style="width: 20%">CHECK DATA</td>
<td style="width: 10%">CHECK NO.</td>
<td style="width: 40%">PAYEE</td>
<td style="width: 10%">DISCOUNT TAKEN</td>
<td style="width: 20%">CHECK AMOUNT</td>
</tr>
<tr style="height: 200px">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Not sure the table element is what you want to go with.
Custom width of cells within columns would be available by using multiple tables (one for each row), perhaps, but a single table cannot have columns change width every row.
Maybe try a div layout.
Regarding the height set on tr - you chose a height too small, so there is no effect, a larger value would make the row larger. Again, because of table display settings this works differently and you should probably look for a different layout option.

Just use 2 tables:
table {
border: solid black;
border-width: 0 1px;
width: 100%;
height: 30px;
table-layout: fixed;
border-spacing: 2px;
margin-top: -2px; /* same value as border-spacing */
}
td {
border: 1px solid black;
padding: 10px;
}
table:first-child {
border-top-width: 1px;
margin-top: 0;
}
table:last-child {
border-bottom-width: 1px;
}
<div>
<table>
<tr>
<td>REFERENCE NO.</td>
<td>DESCRIPTION</td>
<td>Invoice DATE</td>
<td>INVOICE AMOUNT</td>
<td>DISCOUNT TAKEN</td>
<td>AMOUNT PAID</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table>
<tr>
<td>CHECK DATA</td>
<td>CHECK NO.</td>
<td>PAYEE</td>
<td>DISCOUNT TAKEN</td>
<td>CHECK AMOUNT</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

Honestly, even though tables are meant to display tabular data, I would go with a div layout here.
You can easily do this with a wrapper and some floated div and then you can do any and all customization you like to any of the "cells". Just my .02