I have a page which contains a table. On the same page, there is a footer and side bar. I've manipulated the table such that the width is how I like it, however I cannot seem to use the same method for height.
This is what my page currently looks like:
There are many more table items that continue to go down, however as you can see, the items are being cut off by the footer. When I set the height to an explicit value such as 300px I get the effect that I am looking for:
where there is a scrollbar. The problem with this is that it is not dynamic. For example, if I make the window size larger vertically, the table height is not increased with it. I've tried using % values such as 80% but it does not seem to affect anything. I want to be able to resize the window and have the height of the table increase/decrease with the resize so that it fits over the whole screen except the footer. How can I achieve this?
EDIT
Here is my source code (ReactJS):
HTML
<table className='task-table'>
<tbody>
<tr className='tasks-header'>
<th>Store</th>
<th>Product</th>
<th>Size</th>
<th>Profile</th>
<th>Proxies</th>
<th>Status</th>
<th>Actions</th>
</tr>
{this.renderTaskData()}
</tbody>
</table>
SASS
.task-table {
margin-left: 85px;
margin-top: 30px;
border-spacing: 0 10px;
width: calc(100% - 107px);
user-select: none;
display: block;
overflow-y: auto;
overflow-x: hidden;
height: 300px;
tbody {
display: table;
width: 100%;
}
}
.tasks-header {
font-family: 'Muli', sans-serif;
font-size: 12px;
font-weight: $extra-bold;
color: $text-light;
letter-spacing: 1px;
text-align: left;
th {
padding-left: 36px;
}
}
Would you like to share your source code? Meanwhile, perhaps you should try nesting the table in a div since divs are block-level elements and then control the size of the div with % or vh. Your table should reflow according to the height of this container div.
Related
I'll try to be very modest on this one because I've been stuck in this problem for an hour already. I created my very own header-bar sort-of and here is the normal view of it in my own resolution. But whenever I try to view it on my friend's netbook (which has lower resolution), it will display something like this.
Here's my CSS:
#header_table {
width: 100%;
min-width: 100%;
height: 55px;
margin: auto;
background-color: #EEEEEE;
color: #FFFFFF;
}
And on the left cell of the table I put
<td width = 70%>
I tried putting
<td style="width:70%; min-width:70%;">
but still it won't work.
How can I make that table cell on the right adjust or move so that the button won't be under the textbox?
This question has been asked several times, but none of the answers provided seem to help me:
See this in action here: http://jsfiddle.net/BlaM/bsQNj/2/
I have a "dynamic" (percentage based) layout with two columns.
.grid {
width: 100%;
box-sizing: border-box;
}
.grid > * {
box-sizing: border-box;
margin: 0;
}
.grid .col50 {
padding: 0 1.5%;
float: left;
width: 50%;
}
In each of these columns I have a table that is supposed to use the full column width.
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My problem is that some of the columns in that table have content that needs to be truncated to fit in the given width of the table. That does not happen, though. I get two tables that are overlaying each other.
Requirements:
Needs to be percentage based. I can't set absolute sizes.
Each rows' height must not grow beyond one text line (which would happen if I remove white-space: nowrap)
Must work in Chrome, Firefox and Internet Explorer 8+
Can't display tables below each other as it has to fit onto one sheet of paper when printing.
What I tried:
inside of and use width and overflow on that. Changed nothing.
"display: table;" on containing div - instead of having two columns the tables were displayed below each other
"table-layout: fixed;" - Forced all columns to have same width
I know that columns 2+3 have a total of 30% of width so I tried to manually set column 1 to 70% - Did not change anything
Zero-width spaces in content - didn't change anything, probably due to white-space: nowrap;
Related Questions:
Table width exceeds container's width
How do I prevent my HTML table from stretching
HTML CSS How to stop a table cell from expanding
Table Overflowing Outside of Div
you need to add the table-layout property:
table-layout: fixed;
also include width=100% in the table HTML tag, not just the style tag.
http://jsfiddle.net/reeK5/
Maybe you'll be interested in a max-width: 0; hack I've discovered.
It has some limits, we should use CSS tables instead of HTML, but it works:
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
http://jsfiddle.net/CyberAP/NUHTk/103/
.div {
width:300px;
border:1px solid;
}
.breaked {
word-break: break-all;
}
table{
border:1px solid red;
}
td {
border:1px solid green;
}
<div class="div">
<table>
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
<br /><hr/><br />
<table class="breaked">
<tr>
<td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
<td>13</td>
</tr>
<tr>
<td>ddddddddddddd</td>
<td>aa</td>
</tr>
</table>
</div>
Measurements on tables work differently. In general, width on a table cell is handled as min-width.
One solution, if you don't mind adding extra markup, is to put a div inside each table cell in which you put the content. Then give this div a width, or a max-width. So
<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>
becomes
<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>
and so on.
See updated fiddle: http://jsfiddle.net/bsQNj/4/
Edit: I see the fiddle needs some work - I forgot to put some divs in where they were necessary. But I hope you can work with this idea.
In your CSS:
table {
table-layout: auto;
width: 100%;
}
That should cover all tables
I need a header that is width:100% and has 3 columns with background images in the 1st and 3rd column:
This solution needs to be cross-browser compatible.
First column is a background image and is 50% width (not including width of caption)
Second column is the caption. This has no background (transparent). It's width should not be any greater than it's contents.
Third column is same as first column.
Using a table this takes 2 seconds: http://jsfiddle.net/aLeyS/
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td>Caption</td>
<td></td>
</tr>
table {
width: 100%;
}
table td:first-child, table td:last-child {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
padding: 0 10px;
font-size: 30px;
}
Without a table this seems to be much trickier.
I've tried using set percentage widths on DIVs inside the parent div, but it always ends up giving the center column more width than it needs, or forcing the caption to wrap if it's not enough percentage.
Again, the center column (caption) should not have any width greater than its content, and it's background needs to be transparent (not white).
You can fix this by setting display:table-cell on the divs. I've updated your jsFiddle.
HTML
<div class='bg'></div>
<div class='caption'>Caption</div>
<div class='bg'></div>
CSS
div {
display: table-cell;
}
div.bg {
width: 50%;
background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
div.caption {
padding: 0 10px;
font-size: 30px;
text-transform: uppercase;
}
First of all, want to say, that I'm not a front-end engineer and my skills of UI and UX are very low.
So my question is:
I have a div with p tags inside. I want to have it width: 700px when the browser window is maximized. But if I put this property in CSS of my div. The text will not shrink if I resize the window. So I want to have it up to a certain point while window is maximized and shrink it if you resize the window, without affecting side-bar div.
To be more clear I will give you an example:
Maximazed Browser window:
Minimized Browser window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}
You don't need to use Media Queries in your case, but that would be the case in more complicated cases (different breakpoints for example).
Just use max-width: 700px and you're done.
Normal behavior: your paragraph is never wider than 700px.
With very small widths, paragraph occupies the whole width as would any block element and it's still smaller than 700px so no need for MQ!
See this fiddle to see it into effect: http://jsfiddle.net/LQbgJ/ (I used 200px instead of 700)
Compatibility should be IE7+
What you want are Media Queries. Take a look at the W3C recommendations for them.
Basically, the syntax is as follows:
#media screen and (min/max-width: ){
//do something
}
These are called 'break points'. Which means, at the point where the browser reaches the min/max width you provide, you can over-rule other css. So you can make your p and div sizes different.
#media screen and (min/max-width: ){
div {
width: 200px;
}
p {
font-size: 20px;
}
}
Also take a look at Smashing Magazine's tutorial on how to use them.
I want to create a squared table 9x9, width and height should be 100%, and each cell should be 11.11% height and width. I could do it with below code but when the text inside the cell is too large the cell grows down with it. I don't want that. I just simply want the text to be hidden. Preserve the size of the table is my priority ;)
This is what I wrote:
<div class="full_screen">
<table border="1" class="full_width full_height">
<tr class="cell_row">
<td class="cell">long long long long long text</td>
<td class="cell">2</td>
<td class="cell">3</td>
<td class="cell">4</td>
<td class="cell">5</td>
<td class="cell">6</td>
<td class="cell">7</td>
<td class="cell">8</td>
<td class="cell">9</td>
</tr>
... other 8 rows and its cells are similar...
the CSS
body {
font-size: 9px;
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: rgba(0,0,0,0);
height: 100%;
}
div.full_screen {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cell_row {
width: 100%;
height: 11%;
}
.cell {
width: 11%;
/*height:100%;*/ /*cell height should be always 11% the height of the hole table*/
margin: 0px;
padding: 0px;
word-break: break-all;
}
How can I clip the content of the cell so cell's height will be always 11% (100%/9 =11.11%) of the table?
You have several problem here.
First, tables are no designed to work that way, they expand horizontally, not vertically, so they will never respect a height:11% per row.
Second, TR styles are ignored, so you can safely remove them.
Third, TD's ignore height for the same reason explained on the first point.
BUT, there is a workaround to the third point, you can use line-height to force a TD height or a nested element (ie DIV) with proper height. But that stills leaves you with a problem, no way to get the height as a 11% of the total document/window height.
What you can do is use some JavaScript to update the TD height (using the workaround explained above) on page load (and update on resize).
You can add
table-layout:fixed;
word-wrap:break-word;
to your table class. It will ensure that your td width will not exceed given %. It will automatically wrap your content appropriately.
As per I can see it can be fixed using following two way:
You can add font-size: 11px; .cell class
Are you getting this data from back-end or if you are displaying text using JSP or something. If you know how many letters you have to display you can get substring and append ... (ellipse). Like you string will be long long long ...
If your application allows you.