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
Related
I wanna reduce the line height between table rows. I used the following code, But it didn't work for me. Please look at my picture. I wanna reduce the line height between "Mon-Sat 09:00 AM - 7:00 PM" and
"We closed Sunday & Holidays". see the photo
I used following code, But I didn't do anything
.tb tr {
height: 0px;
}
table {
margin: 0 15.0% 0 0;
float: right;
}
p {
font-weight: bold;
float: right;
}
span {
font-weight: bold;
color: red;
}
<table class="tb">
<tr>
<td>
<p>Business Hours:</p>
</td>
<td><span>Mon - Sat 09:00AM - 7:00PM</span></td>
</tr>
<tr>
<td></td>
<td><span>We closed Sunday & Holidays</span> </td>
</tr>
</table>
Please tell me how to do it.. default table height is very high.
The p tag has margin at top and bottom from the browser css. Please just add the below condition and adjust the margins to your desired height!
.tb tr {
height: 0px;
}
p.bottom-no-space {
margin: 0px;
}
<table class="tb" style="margin:0 15.0% 0 0; float: right;">
<tr>
<td>
<p style="font-weight: bold; float: right;" class="bottom-no-space">Business Hours:</p>
</td>
<td><span style="font-weight: bold; color: red; ">Mon - Sat 09:00AM - 7:00PM</span></td>
</tr>
<tr>
<td></td>
<td><span style="font-weight: bold;color: red; ">We closed Sunday & Holidays</span> </td>
</tr>
</table>
You can easily manipulate HTML tables with css using the ff.
/*if you want your table to have borders*/
table, td, th {
border: 1px solid black;
}
/*If you want your borders to be merged to other borders*/
table {
border-collapse: collapse;
width: 100%;
}
/*Finally the height, this will give your th, td and tr an equal height of 0px
just try to play with this to get your desired height, you can also use padding*/
th, td, tr {
height: 0px;
}
https://www.w3schools.com/css/css_table_size.asp
Don't use a table. You can lay this out with much more flexibility with out. There are many ways to do this. Just one example is below. A definition list would also be a good candidate here.
.businessHours * {font-size:16px;}
.businessHours h1 {margin: 0; padding-right:1em;}
.businessHours {display:flex; align-itmes:flex-start;}
.businessHours > div {color:red; font-weight:bold;}
<section class="businessHours">
<h1>Business Hours</h1>
<div>
<div>Mon - Sun 0:900AM - 7:00PM</div>
<div>We are closed Sundsays & Holidays</div>
</div>
</section>
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
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 have a table with names of members. I have the data with the name and then elements, i.e. current rank, title, since with the company etc. I would like them to appear right below without any space, typically seen after a p tag. I've read elsewhere here and other places on solutions, I've tried one that does not seem to offer the effect I need.
The CSS of line-height: 5px; font-size: 5px; I've modified to 5 from the suggested 14. I saw a change, but not sure on how far can I go, to zero? Then, I need to modify the font size of the elements in the grids with the name bigger than the other elements, currently this seems to work. Does the second item in the CSS (font-size: 5px;) conflict with this?
The last issue is when I resize the browser to small, the mobile site initiates and the text stays the same size and wraps.
p {
margin: 0;
padding: 0;
}
table td {
line-height: 0;
font-size: 0;
}
table td p {
line-height: 5px;
font-size: 5px;
}
#first {
font-size: 14pt;
}
#second {
font-size: 12pt;
}
#third {
font-size: 10pt;
}
<table border="0" style="width: 100%;" cellpadding="0">
<tbody align="center">
<tr>
<td>
<p id="first">Tom Johns</p>
<p id="second">Test Test</p>
<p id="third">Life Member 1912</p>
</td>
<td>
<p id="first">Bob Jones</p>
<p id="second">Past Chief</p>
<p id="third">Member Since 1923</p>
</td>
</tr>
</tbody>
</table>
p {
padding: 0;
}
table{
border-spacing: 0;
border-collapse: collapse;
border:thin black solid;
}
table td {
line-height: 0;
font-size: 0;
}
table thead tr th{
border-bottom:thin black solid;
padding: 5px;
}
table tbody tr td{ /* give padding as per your need */
border-bottom:thin black solid;
padding: 5px;
}
table td span {
display:block;
line-height:1.2;
}
.first {
font-size: 14pt;
}
.second {
font-size: 12pt;
}
.third {
font-size: 10pt;
}
<table border="0" style="width: 100%;" cellpadding="0">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>
<span class="first">Tom Johns</span>
<span class="second">Test Test</span>
<span class="third">Life Member 1912</span>
</td>
<td>
<span class="first">Bob Jones</span>
<span class="second">Past Chief</span>
<span class="third">Member Since 1923</span>
</td>
</tr>
<tr>
<td>
<span class="first">Tom Johns</span>
<span class="second">Test Test</span>
<span class="third">Life Member 1912</span>
</td>
<td>
<span class="first">Bob Jones</span>
<span class="second">Past Chief</span>
<span class="third">Member Since 1923</span>
</td>
</tr>
</tbody>
</table>
Instead of id use class to give multiple style.
Hope this helps.
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.