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.
Related
Working on something for school and the "Democrat" column is much wider than the "Republican" and "Independent" columns. I'd like those columns and rows to have equal width if possible, and not sure how to achieve this. I tried using style="width:xx%" and wasn't successful with that. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3" style="width:100%">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
Problem #1
I'd like those columns and rows to have equal width if possible,...
Rows (>tr>) are always equal in width in a <table> so long as the total of colspan are equal for each row. You have succeeded in doing so, so you only need to be concerned with column (<td>/<th>) width.
Problem #2
I have a table with spanned columns and rows, and want to center the last 3 rows
Issues
HTML tables behave differently than other types of elements in that they will automatically conform to the content within each cell (<td>/<th>) and at the same time adjust according to the the width of the <table> element. Setting the width directly to a cell will not work since the table and it's cells are always adjusting to find a balance between it's content and it's dimensions.
Also, it's invalid to have a <caption> outside of a <table>. <caption> (if used) must be the first child of a <table>. In addition, be mindful of multiple selectors such as the following example below which applies not only to <table>, but also to all <th> and <td> as well.
table,
th,
td {
width: 600px;
/* other rulesets */
}
The only reason why you don't have each cell at 600px width is because of how the <table> behaves.
Solution
Problem #1
By default <table> elements are assigned a CSS ruleset: table-layout: auto which is responsible for the behavior previously mentioned. If set to fixed, then each column width can be set directly by applying it to either a <colgroup> or <col> element, or a <th> (or a <td> in the first <tr> if there are no <th>).
In the example below each <col> is assigned a width of 120px via it's class .full (there are 5 columns instead of 6 so 120px x 5 = 600px).
Problem #2
In order to center the last 3 columns apply the following ruleset:
td {
align-text: center;
}
By default <th> is align-text: center so you only need to apply it explicitly to <td>.
Note, the example has been altered to what I believe to be semantically and aesthetically better and isn't a requirement.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Table Layout Example</title>
</head>
<style>
html {
font: 300 2ch/1.2 "Segoe UI";
}
table {
table-layout: fixed;
min-width: 600px;
margin: 10px auto;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: 1.5px;
}
table,
th,
td {
border: 1px solid black;
}
td,
th {
padding: 4px;
}
tbody th {
padding-left: 8px;
text-align: left;
}
td {
text-align: center;
}
.full {
width: 120px;
}
.d {
background: rgba(0, 0, 255, 0.3);
}
.r {
background: rgba(255, 0, 0, 0.3);
}
p {
margin: 4px;
padding: 4px;
border-left: 4px solid #CCC;
font-weight: 700;
font-style: italic;
background: rgba(212, 175, 55, 0.5);
}
.brw th {
font-weight: 600;
}
.opinion {
padding: 12px 0 12px 8px;
border-left: 0;
font-weight: 600;
}
.majority {
font-weight: 600;
}
</style>
<body>
<table>
<caption>Today's Opinion Poll Question</caption>
<colgroup>
<col span="2" class="full">
<col class="full d">
<col class="full r">
<col class="full">
</colgroup>
<thead>
<tr>
<th colspan="2" rowspan="2" style="padding: 8px 6px; text-align: left">
<p>Do you favor or oppose increasing the minimum wage?</p>
</th>
<th colspan="3" scope="colgroup" style="background: #FFF">Political Party</th>
</tr>
<tr class="brw">
<th scope="col">Democrat</th>
<th scope="col">Republican</th>
<th scope="col">Independent</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup" style="border-right: 0;">Public Opinion</th>
<th class="opinion" scope="row">Favor</th>
<td class="majority">70%</td>
<td>35%</td>
<td class="majority">55%</td>
</tr>
<tr>
<th class="opinion" scope="row">Oppose</th>
<td>25%</td>
<td class="majority">60%</td>
<td>30%</td>
</tr>
<tr>
<th class="opinion" scope="row">Unsure</th>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</tbody>
</table>
</body>
</html>
Remove the style="width:100%" from the <th colspan="3" style="width:100%">Political Party</th> column. Because width: 100% here means that the width is going to be in inherited from the parent which is in this case is the <tr element and since this cell is supposed to span multiple cells in another row, the Democrat cell is taking an additional space. If you want a fixed width on all cells, you can set on th level in the styles. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
div {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td rowspan="2"> <div>four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
The desired result is for the div in the table cell to look more like
this:
Notice the "four" div fills the entire width and height of the table cell in the image but not in the code snippet.
There are questions similar to this that suggest using absolute positioning which doesn't work in this exact situation ( per my attempts ) on a table with unspecified width and height. Other answers say there is no way to do this without JavaScript. But those answers were from 2010. Any input would be much appreciated.
if you are okay with a few classes then you can achieve what you shown in the image.
table,
th,
td,
div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
.spl {
writing-mode: vertical-rl;
border-style: none;
}
.inb {
background-color: #ddd;
}
<table>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td rowspan="2" class="inb">
<div class="spl">four</div>
</td>
<td>five</td>
<td>six</td>
</tr>
<tr>
<td>seven</td>
<td>eight</td>
</tr>
</table>
You could use jQuery as follows to get the (outer) width and height of that parent td and apply it to that div
$(document).ready(function() {
var cellwidth1 = $('.x1').outerWidth();
var cellheight1 = $('.x1').outerHeight();
$('.x2').css({
'height': cellheight1,
'width': cellwidth1
});
});
* {
box-sizing: border-box;
}
table, th, td, div {
font-family: Arial;
padding: 1em;
border-style: solid;
border-collapse: collapse;
text-align: center;
}
td.x1 {
padding: 0;
}
div.x2 {
writing-mode: vertical-rl;
background-color: #ddd;
border-color: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr>
<td class="x1" rowspan="2"> <div class="x2" >four</div> </td>
<td>five</td> <td>six</td>
</tr>
<tr>
<td>seven</td> <td>eight</td>
</tr>
</table>
After trying many things it seems that as of 2020 stretching a div to fill all the available space of a table cell without JavaScript is not possible unless you use absolute/relative positioning.
The downside with absolute positioning is that the cell does not expand with the content inside it and even not expanded the table cell seems to break on mobile ( tested with an iphoneXS on IOS14 )
dev-sbx.github.io/x
The only real solution here seems to be using a CSS Grid layout opposed to an HTML 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.
I'm trying to use HTML to construct a table with three rows (1-3) and three columns (A-C) forming nine "virtual cells" (A1, B1, C1, A2, B2, C2, A3, B3, C3) and apply row spanning so that:
cell A1 span all three rows (covering A2 and A3)
cell C1 span two rows (covering C2)
cell B2 span two rows (covering B3)
This is what I want to see:
This is the HTML I thought would give me that:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td></tr>
<tr><td rowspan="2">B2</td></tr>
<tr><td>C3</td></tr>
</table>
</body>
</html>
But that gives me:
What is the correct way to get what I want? Or is it not possible?
This is for use in technical documentation. It is not a layout issue, the content is semantically a table.
In order to prevent the rows collapsing without the need for additional markup, you can attach a phantom cell to each row with tr::after set to display: table-cell with your cell padding on top and bottom and a unicode blank space:
tr::after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
Gives you the correct result:
It's worth noting that the phantom cell will create a slight gap to the right like this:
Full snippet
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
tr:after {
content: '\00a0';
display: table-cell;
padding: 1em 0;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Here's a solution without having to know the table height up front, using hidden table cells, like in Align table using rowspan and colspan (as I said, it's basically a duplicate, just another layout):
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
td.hidden { visibility: hidden; padding: 1em 0; border: 0 none; }
</style>
</head>
<body>
<table>
<tr><td rowspan="3">A1</td><td>B1</td><td rowspan="2">C1</td><td class="hidden"></td></tr>
<tr><td rowspan="2">B2</td><td class="hidden"></td></tr>
<tr><td>C3</td><td class="hidden"></td></tr>
</table>
</body>
</html>
Why not just setting a height to the tr cause it is a table the height will adjust anyways if there is more content inside the row.
something like so:
table {
border-collapse: collapse;
}
tr {
height: 30px;
}
td {
border: 1px solid black;
padding: 1em;
vertical-align: top;
}
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
Otherwise,
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; }
td{border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2">B2</td>
</tr>
<tr>
<td rowspan="2">C3</td>
</tr>
</table>
</body>
</html>
You could hack it like this:
<html>
<head>
<style>
table { border-collapse: collapse; }
td { border: 1px solid black; padding: 1em; vertical-align: top; }
</style>
</head>
<body>
<table>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0;height:50px"></td>
<td rowspan="2">B2</td>
</tr>
<tr>
<td style="width:0px;padding:0;border:0"></td>
<td>C3</td>
</tr>
</table>
</body>
</html>
... but I would recommend to use another structure instead of tables, since it doesn't have a lot in common with table, besides the columns.
It's depend the height of your table.
http://codepen.io/anon/pen/jBOgpx
<table>
<tr>
<td rowspan="3">A1</td>
<td>B1</td>
<td rowspan="2">C1</td>
</tr>
<tr>
<td rowspan="2" style="height:65px">B2</td>
</tr>
<tr>
<td>C3</td>
</tr>
</table>
I have a simple table with rowspan . I need to that cell number1, cell number2 and cell number6 to be the same size .
How can I achieve that please
<table>
<tr>
<td>number1</td>
<td>number3</td>
</tr>
<tr>
<td rowspan="2">number2</td>
<td>number4</td>
</tr>
<tr>
<td>number5</td>
</tr>
<tr>
<td>number6</td>
<td>number7</td>
</tr>
</table>
Like this you mean?
This solution uses the existing markup, no need for any "empty" rows.
table {
border-collapse: collapse;
}
td {
border: 1px solid #ddd;
padding: 10px;
}
tr:nth-child(1) td:first-child,
tr:nth-child(2) td:first-child,
tr:nth-child(4) td:first-child {
height: 60px;
}
<table>
<tr>
<td>number1</td>
<td>number3</td>
</tr>
<tr>
<td rowspan="2">number2</td>
<td>number4</td>
</tr>
<tr>
<td>number5</td>
</tr>
<tr>
<td>number6</td>
<td>number7</td>
</tr>
</table>
The trick is to add a single cell row under each row that has a rowspan. So basically, you need to accommodate room for any span in a table, otherwise you'll get extra cells protruding from the table. Easiest way to remember is to:
Make one less cell for every unit of the (rowspan -1) on each proceeding row.
Make one less cell for every unit of the (colspan -1) on each proceeding column.
table {
width: 105px;
table-layout: fixed;
}
td {
width: 50px;
text-align: center;
}
tr {
height: 50px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Col1, 2, & 6</title>
<style>
table {
1px solid grey
}
td {
border: 1px solid black
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td rowspan="2">6</td>
<td rowspan="2">7</td>
</tr>
<tr></tr>
</table>
</body>
</html>