I've been dealing with a problem, that I cannot seem to find an answer for. Basically, I have a set of divs, all of the same class, but varying in size depending on the data displayed in them. I'm trying to get them to stagger in a certain way. (excuse my bad drawings)
edit: almost forgot to mention, the divs are using the bootstrap class "col-lg-6".
This is the original result:
original effect
The result I was able to achieve:
achieved effect
And the desired result I am trying to achieve:
desired effect
The css styling I used to achieve the current result is as follows:
.div_class {
position: relative;
vertical-align: top;
text-align: center;
display: inline-block;
margin-top: 10px;
}
How could I achieve the desired effect?
Thanks!
You can always use a table to create this effect. Make sure you use the padding within the cells to create the spacing that you need... Hope this helps
<table style="width: 100%;">
<tbody>
<tr style="height:45%;">
<td style="height: 150px; width: 98px;">Div 1</td>
<td style="height: 225px; width: 118px;" rowspan="3">Div 3</td>
</tr>
<tr style="height: 47px;">
<td style="height: 150px; width: 98px;" rowspan="2">Div 2;</td>
</tr>
</tbody>
</table>
Related
I'm having troubles adjusting my table from normal web sizes to mobile devices (it cuts in the middle)
I tried to fix that in many ways but all didn't work (tried white-space: nowrap, adjusting width, scaling it, max-width:).
<div class="contact">
<h2>When to contact us?</h2>
<table>
<tr>
<th>Monday-Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<td width="5%">8AM-4PM</td>
<td width="5%">10AM-2PM</td>
<td width="5%">10AM-1PM</td>
</tr>
</table>
</div>
.contact h2 {
margin-top: 50px;
margin-bottom: 100px;
}
.contact table {
height: 10rem;
font-size: 0.7rem;
}
td {
max-width: 100%;
white-space: nowrap;
}
[here is a screenshot of what it looks now]
https://i.stack.imgur.com/yNxpH.png
Thanks in advance
There is no one way to make a responsive table.
If it's not a very important component, I suggest adding tables in div and overflow on it to make a horizontal scrollbar.
You can find more information here:
Accessible, Simple, Responsive Tables
Example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_table_responsive
<tbody>
<tr>
<td valign="top" align="center" bgcolor="#3f76bf" style="background-position: center; background-size: cover; border-radius: 6px; background-color: #3f76bf; background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png')" background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png">
I would like to make the image in the td tag a hyper link, never imagined I would be spending 5 hours on this simple question. Seems I can not just wrap in tag. So frustrated and appreciative of your help.
I wrote up a more semantic way for doing what you're doing. Of course I don't know what the rest of your code looks like and you may have to tweak things. Generally it's not a good idea to use tables for layout. But I don't know how you're using it so I keep it as is.
(Tables should only be used for tabular data)
From the comments I can see you're using this in an HTML email where using tables for layout is still appropriate due to bad support for modern features. I have in-lined the styles for you in the example
<table>
<tbody>
<tr>
<td style="text-align: center;background-color: #3f76bf;">
<a href="https://yoururl.tld">
<img style="max-width: 100%;" src="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png" alt="Describe the content of the image for someone who can't see the image">
</a>
</td>
</tr>
</tbody>
</table>
Update
I have since learned why they would use background images (for the images to be an equal grid) and for that I wanted to also add a solution which might be closer to your specific use case. Just a reminder to everyone that below code should not be used anywhere but in emails.
/* Ignore this CSS completely for your example */
/* It's just here for the example in SO to look nice */
td {
width: 100px;
height: 200px;
}
<table>
<tbody>
<tr>
<td
valign="top"
align="center"
bgcolor="#3f76bf"
style="
position: relative;
background-position: center;
background-size: cover;
border-radius: 6px;
background-color: #3f76bf;
background-image: url('https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png');
"
background="https://mcusercontent.com/73b8e8571a2f854d4f817a5c8/images/1a986052-d10d-4bf7-890f-133862bc982f.png"
>
<a href="https://yoururl.tld" style="
position: absolute;
top: 0;
right: 0;
botom: 0;
left: 0;
">
</a>
</td>
</tr>
</tbody>
</table>
Try putting a SPAN element inside the element. It should expand to fill the space. Wrap your link around the Span and put your link-able content inside the span
<td><span>CLICK ME DON KICK ME</span></td>
If span does not work try using a element or a .
My code is similar to as follows:
table,tr,td {
border-collapse:collapse;
border: 1px solid black;
}
label {
font-size: 0.7rem;
}
table {
table-layout: auto;
}
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
<tr>
<td>
<label>Foo bar</label>
</td>
</tr>
</tbody>
</table>
The issue occurs when the element on top is bigger than the element on the bottom. I know the solution seems obvious: use table-layout: auto; However, as you can see, that doesn't work.
There is no padding or margin, and the height is not set manually on either of them. My question is as follows: Why is the space there, and, more importantly, how can I remove it?
I feel really stupid now: it was just the line-height property. I set it lower and that fixed it.
Edit: A more simple solution suggested by VilleKoo is to set the display property of the <label> to block or flex (setting the padding to 0, which is mentioned in the comment, is not required)
I'm using a master page and I have a table that I want to show a border around so that it shows around each cell in the table. Here's the code I'm trying to put a border around:
<table class="mainTable" style="border-color:#DDDDDD;">
<tr>
<td class="masterBannerTop" colspan="6" >
<img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" />
</td>
</tr>
<tr>
<td class="masterBannerNav">HOME</td>
<td class="masterBannerNav">ABOUT ME</td>
<td>
... And it goes on from there. Here's the CSS:
.mainTable
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border-spacing: 30px;
border-color:#999999;
}
No matter what color I put in, it doesn't work in any of the browsers. I mean, there's only a couple places where I can put the color. Even if i try to use just CSS or in-line style elements, it still doesn't seem to want to work.
try setting
border:1px solid #999999;
in your css instead of fiddling around with table attributes! Try to avoid using these attributes because it makes changing the style of your site more difficult and the code more verbose for people that have to maintain it. Good luck and let me know how it goes :)
style="border: 1px solid black"
Perhaps also make sure you set border-width: 1px or something along those lines?
Do
<table border="1"> ... </table>
to get borders around your table and between cells.
Do
<table style="border:'1px solid #DDDDDD'"> ... </table>
or
.mainTable {
border:'1px solid #DDDDDD';
...
}
or
.mainTable {
border-size:1px;
border-style:solid;
...
}
to get borders around your table.
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
​Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});​
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
Table cells by default fit to their content and ignore your width.
Other possibility to the already provided answers:
Surround the text with some other container:
<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
And change its width:
$('#c00 div').width(30);
You have a few issues:
table-layout: fixed tells the columns to be equal.
Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.
Finally, width should be "30px" (in quotes).
Hope that helps.
Try this:
$('#c00').css("width","30px");
or this:
<td id="c00" style='width:30px'>
If you are using IE, you may need to have Compatability Mode on. Also, make sure you are importing the proper jQuery plugin.