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
Related
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>
So I'm designing an org chart based on the table element and I have a problem. I'm using <hr> elements to create the connectors; however, I can't get the dead space inbetween elements to go away. I've spent the last hour trying to figure out how the hell to get it to work and I just can't seem to figure it out.
I've included a picture to show:
The other issue is more of a question I haven't really looked into but figured I'd ask anyway. How can I lock the height of my table items. I've locked the width just fine but I can't seem to lock the height to 70px.
And here is some choice code:
<table class="orgchart" cellspacing="0" cellpadding="0">
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td class="item">Director</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr class="divider"><td></td><td></td><td></td><td></td><td></td><td></td><td><hr width="1" size="20"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td class="item">Assistant to the Director</td><td></td><td class="item">Deputy Director</td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
And the CSS:
.orgchart td {
width: 70px;
height: 70px;
text-align: center;
overflow: hidden;
white-space: no-wrap;
}
.divider td {
height: 20px;
}
.item {
border: 2px solid black;
}
And here is the CodePen: http://codepen.io/jacob_johnson/pen/GpEjmm?editors=110
There's a margin all the way around the <hr>. Remove the top and bottom margins from the <hr>. All browsers apply default styling to elements, though not always the same. As a result you will see reset and normalize stylesheets used to improve visual consistency and development pains.
Updated Codepen with CSS below added.
hr {
margin: 0 auto;
}
If I was doing this project I would find a simple grid framework to layout with DIVs or more than likely I would create this chart as an inline SVG.
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.
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
td.block {
border: 1px solid black;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.
Looking at the image below, the first image is what the markup produces. The second image is what I want.
I'm not sure if I understand your question, but I'll take a stab at it:
td {
border: 1px solid #000;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
Setting
max-width:100%;
white-space:nowrap;
will solve your problem.
For me, this is the best autofit and autoresize for table and its columns (use css !important ... only if you can't without)
.myclass table {
table-layout: auto !important;
}
.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
width: auto !important;
}
Don't specify css width for table or for table columns.
If table content is larger it will go over screen size to.
There are many ways to do this!
correct me if I'm wrong but the question is looking for this kind of result.
<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>
The first 2 fields will "share" the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
If you are happy to let text wrap you can move white-space:nowrap; to the style of the 3rd field will be the only way to start a new line in that field.
alternatively, you can set a length on the last field ie. width:150px, and leave percentage's on the first 2 fields.
Hope this helps!
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
One option is to replace table with CSS4 flex divs:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
First, setting
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
ensures that your your table cells will stretch.
Now you only need
td.fit {
width: 0;
min-width: fit-content;
}
on your fitting cells.
Note that now the table will only overflow in width if content of all fitting cells is too much to fit into a table-width of 100%.
table {
white-space: nowrap;
width: 100%;
}
td {
border: 1px solid black;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
td.fit {
width: 0;
min-width: fit-content;
}
<table>
<tr>
<td class="stretch">this should stretch</td>
<td class="stretch">this should stretch</td>
<td class="fit">this should be the content width</td>
</tr>
</table>
Simple :
<div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to