I am trying to display some text in the bottom left of my table but having some issues getting that. What can I try to get that to display?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
.heading2_b10 {
font-family: calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10">Text</td>
</tr>
<tr>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
I think the simplest thing to do would be just to add style="text-align:left;" to the html tag's attribute
Can colspan attribute help you in this case?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
heading2_b09 {
font-family:calibri;
font-weight: bold;
font-size: 8;
text-align: center;
}
.heading2_b10 {
font-family:calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10" colspan="2">Text</td>
</tr>
<tr>
<td class="heading2_b09">LOG-ID: ###</td>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
Explanation: colspan attribute can be applied on a <td> element, it allows you to set how columns wide the element should be.
What is changed?
The first row has colspan="2", that means his width will be extended to 2 columns, like the one under. But this one has really two columns to show where the LOG-ID: ### string is the first, aligned on the left and LADIES STOCKINGS SYN-BLACK one is the second
Related
I am using a table and here's a HTML snippet for the same:
th {
text-align: left;
}
td {
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
margin-right: 20px;
border-top-left-radius: 10px;
}
<table>
<th>
<td>Exams</td>
<td>Science</td>
<td>Mathematics</td>
<td>Biology</td>
</th>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
What I want is to increase the distance between two column elements. I have added margin-right, but it doesn't reflect in the output. Can someone help?
You can use border-spacing in the rule for the table element to create space between the rows and columns, and padding on the cells to create additional space inside the cells (including the background).
Note: Your HTML is invalid: th elements are special ("header") cells inside a row (tr) - see changed code below.
table {
border-spacing: 10px 5px;
}
th {
text-align: left;
}
td,
th {
padding: 0 5px;
height: 20px;
font-size: 12px;
background-color: #000;
color: #fff;
border-top-left-radius: 10px;
}
<table>
<tr>
<th>Exams</th>
<th>Science</th>
<th>Mathematics</th>
<th>Biology</th>
</tr>
<tr>
<td>2000</td>
<td>95</td>
<td>64</td>
<td>33</td>
</tr>
</table>
You can use border-spacing. Unless by "gap" you just mean padding.
You can also use padding which can give the same effect that you want:
padding-right: 20px
I am trying to make a table in HTML/CSS and I am having trouble with the width of the cells. When I put "width: 24%" in the "table td" in CSS the table cells stays in the size that I want. OK, great. But when I put "width: 15%" the table cells grows??? And when I put "width: 8%" it takes all the space of the page. Why?
Here is the HTML code of the table:
<table border="1">
<caption>RGB colors and their combinations</caption>
<tr>
<td> </td> <td bgcolor="#FF0000">RED</td> <td bgcolor="#00FF00">GREEN</td> <td bgcolor="#0000FF">BLUE</td>
</tr>
<tr>
<td bgcolor="#FF0000">RED</td> <td bgcolor="#FF0000"> </td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td bgcolor="#00FF00">GREEN</td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td bgcolor="#0000FF">BLUE</td> <td bgcolor="#FF00FF"> </td> <td bgcolor="00FFFF"> </td> <td bgcolor="#0000FF"> </td>
</tr>
</table>
And here is all the CSS code:
h1{
color: gray;
font-family: Bodoni, serif;
}
body{
text-decoration: blink;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding: 5%;
padding-top: 1%;
}
table{
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
caption{
caption-side: bottom;
}
.italico{
font-style: italic;
}
.img_flickr{
text-align: center;
padding-top: 2.5%;
}
.img_flickr > a > img{
width: 50%;
min-width: 200px;
}
table tr{
text-align: center;
}
table td{
width: 24%;
}
The total width should be 100%,
when you set width 20%, first cell width or other cell should be 40%.
please change style to:
table
{
width: 100%;
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
table td
{
width: 20%;
}
table td:first-child
{
width: 40%;
}
when you want to set style to first cell should be use below code
td:first-child
And when I put "width: 8%" it takes all the space of the page. Why?
That is a good question! I tried a few times, here is my observation:
Width of td is relative to it's parent, the tr. The tr is by default width:100% of the table.
Since you manipulate all the td tags, when you make them no longer fulfill the default 100% width of the table, the calculation of it's space may become buggy since this is not expected.
That would explain why, as soon as they're all < 25%, they begin to grow up.
The real question seems to be : what do you want to do ?
If you want the table to take larger or lesser space : manipulate it's width.
If you want some td to be larger than others : manipulate each of them while always making them all combined equal to the table width.
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I'm trying to center this header in the middle of the page. Not sure why margin-left:auto and margin-right:auto isn't working. It won't register align:center either for the table. The table is only a header. Here's the code I have for the css and table.
<style>
table {
margin-top: 2em;
margin-left: auto;
margin-right: auto;
}
table th {
background: linear-gradient(to bottom right, #6688FF, #AACCFF);
height: 4em;
text-align: center;
text-transform: capitalize;
color:white;
border:#ccc 1px solid;
}
table tr {
text-align: center;
}
table thead {
position:fixed;
}
</style>
<table class="head">
<%--header --%>
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<%--body --%>
<tbody>
</tbody>
</table>
Since you're making the thead fixed, it's pulled out of the normal flow. Below, I've demonstrated one way to center it horizontally independent of its surroundings. Otherwise, you're better off making the table fixed, since semantically they should continue their parent / child relationship.
Is there a reason that you're a table for this?
table {
margin-top: 2em;
}
table th {
background: linear-gradient(to bottom right, #6688FF, #AACCFF);
height: 4em;
text-align: center;
text-transform: capitalize;
color:white;
border:#ccc 1px solid;
}
table tr {
text-align: center;
}
table thead {
position:fixed;
left: 50%;
transform: translateX(-50%);
}
<table class="head">
<thead>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
remove position fixed from table thead selector and it should work
At first, yes I did search and found a lot of similar question and no, non of the solutions worked for me.
Now here is my main problem:
I try to get "a" elements in line and wrap if there are to much to fit inside the parent "td".
But I can either get them in line or warp.
"1st" and "2nd_main_container" are in line. the "1st" has a fixed width "2nd" take the remaining space of "wrapper".
I already tried with float inlineblock adding "width:100%" and my last try (see code) every "a" in a seperate "div" inside another main "div" Floating left. They won't wrap, they just grow the main "div", "td", "tr", "table" and "2nd_main_container". "wrapper" size dose not change.
I guess my problem is that "2nd_main_container" has no fixed width, but thats not an option.
I hope someone can help me with a solution to this. Thanks in advance.
http://jsfiddle.net/p7nhjr08/4/
here my code:
<style>
#wrapper {
width: 100%;
white-space: nowrap;
}
#1st_main_container {
display: inline-block;
padding-left: 16px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 16px;
width: 400px;
}
#2nd_main_container {
display: inline-block;
padding-left: 8px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 16px;
vertical-align: top;
}
#2nd_main_container th {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: right;
}
#2nd_main_container td {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
padding-left: 20px;
}
#content {
white-space: normal;
overflow: hidden;
}
#content div {
float:left;
}
#container a {
padding-left: 8px;
padding-right: 8px;
padding-top: 0;
padding-bottom: 0;
}
</style>
<div id="wrapper">
<div id="1st_main_container">
Something
</div>
<div id="2nd_main_container">
<table>
<tbody>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td >
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td id="container">
<div id="content">
<div>
<a></a>
</div>
<div>
<a></a>
</div>
...
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So you have a wrapper with variable width, containing two div-columns. first one with fixed width, and second div shall use the remaining width, correct ?
Maybe you should have a look onto css3 flexbox