I have a table, constructed like this:
<table>
<tr> <td>1</td> <td>2</td> <td rowspan="4">3</td></tr>
<tr> <td>4</td> <td>5</td> </tr>
<tr> <td>6</td> <td>7</td> </tr>
<tr> <td>8</td> <td>9</td> </tr>
<tr height="100"><td colspan="2">10</td><td class="eleven">11</td> </tr>
</table>
Now the problem is within the last row. Whole row has a height set to 100px, so there is a plenty of room in TDs. In the very last TD I want to set an individual padding, so only the content "11" is padded from the top:
.eleven {
padding-top:15px;
}
Setting this causes the problem - the first TD in this row also gets padding-top:10px; Why and how to make only the 2nd one padded?
Why don't you wrap the content you want to be padded into a <div> (onto which you will be applying the padding style) and put that <div> into the <td>?
<td>
<div style="padding-top: 15px;">
Content
</div>
</td>
Ok, I found out what caused the problem. It was an entry in a little html5-css-reset snippet I use:
vertical-align:baseline;
assigned generally to most of common elements. Having that in mind, now everything works as supposed to.
Related
<tr>
<td></td>
<td colspan="3">Susi Handayani Jl. Kebangsaan No.225 300.000</td>
</tr>
How to merge the two td to be inside one Td, but it's not sticking together, merged but I want the word to not stick together beside, make some space from the deleted td to be the same column as above
I tried align but it didn't Work, I've also tried dividing the tr and tried removing td for one paragraph and it still sticks with the second paragraph (td), what I'd expect is the td not to stick together but to align the text above the text that I've made
<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Peserta</th>
<th>Alamat</th>
<th>Simpanan</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>350.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Andi Suryono</td>
<td>Jl. Kemerdekaan No.17</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td colspan="3">Susi Handayani
Jl. Kebangsaan No.225
300.000</td>
</tr>
<tr>
<td>3.</td>
<td>Roy Pratama</td>
<td>Jl. Merdeka No.32</td>
<td>1.000.000</td>
</tr>
</tr>
<tr>
<td>4.</td>
<td>Tia Suryani</td>
<td>Jl. Jelajah No.111</td>
<td>1.555.000</td>
</tr>
</tbody>
</table>
I'm trying to make the table fused but not sticking together, I'm planning to give the word some space and how do I make the space for each column
You're talking about styling, yet you posted no style tag or CSS whatsoever. Post the general CSS you have, to reproduce the problem, or at least a screenshot of what the problem is.
Generally, spacing in tables comes with padding. Try something like:
<style>
td {
padding: 5px 10px;
}
</style>
This will put 5px top and bottom and 10px from both sides of every cell in the table.
My employer has wanted me to take a table that we had on our site and make it more responsive. My solution was to make the table react as detailed in a previous question of mine (Responsive Table Display)
After I went through an implemented that design, I was informed they actually just want the 5 column table "squished" so that it retains all five columns but just has them fit within the viewport, specifically on mobile.
My HTML looks basically like this:
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</tbody>
</table>
Being that I am completely self-taught and have been doing this for a few months now, what can I do to make the table compress its full width in mobile view?
If your table is contained within an element that is 100% of the screen's width you would set the table's width to 100%. If the table's container is not necessarily 100% of the screen's width you could set the table's width to 100vw. The vw unit represents a percentage of the total viewport width. It is not supported in IE8 or lower.
If their width is left unspecified, the columns will be automatically expanded to fit the table's width.
Using the media query from your previous question:
#media only screen and (max-width: 760px),(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%; /* or 100vw depending on the rest of your HTML */
}
...
}
If you need to control the column widths, you can do that by either setting the th and tds to a fixed percentage width (that sums to 100), or by modifying the table-layout property. Setting your table to table-layout: fixed; will space all columns equally.
I am trying to center just certain columns in a table but I am having issues. I know in the past you would just simply apply inline styles to each TD but there has to be a better way.
Here is a simple example:
.centerText{
text-align:center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
With that class I am trying to center the text inside. I know applying css to the col will work for changing background color for the column and text color and such, but I am not sure how I would use it to center a column. I am assuming because I need to center the contents of the td and this is probably just centering the TD element itself; which is already 100 percent.
I understand I can just say apply the css to the 5th TD in this TR but that seems fragile.
Also, bonus points if you can show me how to change the width of a column this way. I used the width attribute for col but that is deprecated in html 5 (even though it is still currently supported.
Done, your class wasn't used anywhere
tr td:nth-child(2) {
text-align:center;
}
<table border="1">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I removed:
<col>
<col class="centerText">
and
.centerText{
text-align:center;
}
Because col doesn't mean anything and you didn't close the tags.
CSS
table {
border-collapse: collapse;
width: 100%;
}
td {
text-align: center
}
If you want to align your all td content to the center
add the centerText class to your table
<table class="centerText" border="1">
It's not completely clear what you want, but if you want to center the contents of a certain column, you can just use this CSS rule:
td:nth-child(2) {
text-align:center;
}
In this example it applies to the second column, but you could define that for any column. It works since the td are always children of a tr, so you can use the nth-child selector.
td:nth-child(2) {
text-align: center;
}
<table border="1">
<col>
<col class="centerText">
<thead>
<tr>
<th>heading1</th>
<th>heading2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
I have made a table with three columns, two with text and one with a picture. The table has 10 rows, so I gave the the cell with the picture a rowspan of 10. I am able to change the width of the picture, but for some odd reason the table-cell won't change it's width. The cell still have the width, the picture originally had.
I have tried setting the image to block, but that doesn't help with the td-width. I could give the td a class with a max-width, but I am looking for another solution.
example
HTML
<table>
<thead>
<tr><th colspan="2">Attribute</th></tr>
</thead>
<tbody>
<tr>
<td>Stufe</td>
<td>9</td>
<td rowspan="10"><img src="#"></img></td>
</tr>
<tr>
<td>Vitalität</td>
<td>12</td>
</tr>
<tr>
<td>Zauberei</td>
<td>10</td>
</tr>
<tr>
<td>Kondition</td>
<td>11</td>
</tr>
<tr>
<td>Belastung</td>
<td>15</td>
</tr>
<tr>
<td>Stärke</td>
<td>13</td>
</tr>
<tr>
<td>Geschicklichkeit</td>
<td>12</td>
</tr>
<tr>
<td>Intelligenz</td>
<td>9</td>
</tr>
<tr>
<td>Glaube</td>
<td>9</td>
</tr>
<tr>
<td>Glück</td>
<td>7</td>
</tr>
</tbody>
</table>
CSS (nothing special)
table {
font-size:90%;
margin:1.5em auto;
padding:0 1em;
border-collapse:collapse;
text-align:center;}
article table thead {
background:#91414B;}
article table th, main article table td {
padding:0.25em 0.5em;}
table img {
display:block;
width:50%;}
table a {
text-decoration:underline;
color:#FFFFFF;}
table a:hover {
text-decoration:none;
color:#C6C6C6;}
I am trying to create this layout with tables in HTML using rowspan and colspan but the size of a cell is not showing how I expected, the value of rowspan and colspan of the cell "X" are "2" but the tables are created like it where 2x1.
Here is my code
<html>
<head>
</head>
<body>
<table border="3" cellspacing="5" cellpadding="3">
<tbody>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td rowspan="2" colspan="2">X</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td rowspan="1" colspan="4">4</td>
</tr>
<tr>
<td colspan="3">5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
This is working properly. It's easiest to see if you add a row that has all four cells occupying a single column:
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
http://jsfiddle.net/ExplosionPIlls/HfHBU/
You're facing a visual problem caused by the there is no third column cell to create any width. The entire third column is created by colspans on X, 4, and 5, so it will appear to have no (or very little) width, and the cells will not expand without width rules if they don't have to.