I'm making a horizontal scroll-able table on my site and it making whole site longer as usual. (screenshot)
Is there a way to prevent this?
here is my html and css
screenshot
.wrapper {
/* table */
height: 40%;
width: 60%;
overflow: scroll;
white-space: nowrap;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.wrapper_ div {
/* div around table */
display: inline-block;
overflow-y: hidden;
}
<div class="wrapper_">
<table border="1" style="font-size:10pt;" class="wrapper">
<tr>
<th></th>
<th>受注番号</th>
<th>会社名</th>
<th>受注日</th>
<th>販売会社</th>
<th>契約年数</th>
<th>月額利用料</th>
</tr>
<tbody>
<!-- SOME PHP INSIDE -->
</tbody>
</table>
</div>
<div class="wrapper_">
<table border="1" style="font-size:10pt;" class="wrapper">
<tr><th></th><th>受注番号</th><th>会社名</th><th>受注日</th><th>販売会社</th><th>契約年数</th><th>月額利用料</th></tr>
<tbody>
< SOME PHP INSIDE ?>
</tbody>
</table>
</div>
.wrapper { /* table */
height:40%;
width:60%;
white-space:nowrap;
border-collapse: collapse;
padding: 0;
margin: 0;
}
.wrapper_ { /* remove div */
display: block;
overflow-y: hidden;
overflow-x: auto
}
Related
<div className="container">
<div className="left-area">
<div className="container2">
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to truncate that very long text.
.container {
margin-top: 20px;
width: 90%;
display: flex;
.left-area {
flex: 1 1 20%;
.container2 {
flex: 1 1 20%;
table {
width: 100%;
}
}
}
}
I tried to use this css on the td cell
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
The missing key is table-layout: fixed.
table {
width: 100%;
table-layout: fixed;
}
td {
width: 50%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table>
<tbody>
<tr>
<td>
48148581581581858158158iffjafjadjfjafdjafdjfjadfjdjafdjafdjajdfjadfjdafjdajfajfdjaf
</td>
<td>1/1/0001</td>
</tr>
</tbody>
</table>
With table-layout: auto (the default setting), the browser uses an automatic layout algorithm that checks the content size to set the width of the cells (and, therefore, columns).
The width and overflow properties are ignored in this scenario, and ellipsis can't work.
With table-layout: fixed, you can define the width of the cells on the first row (and, therefore, set the column widths for the table).
The width and overflow properties are respected in this case, allowing the ellipsis function to work.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Behavior of code snippet is different in Chrome 51.0.2704.103 and Firefox 47.0.1.
Please explain why this happens. Where behavior is correct, where not and why you think so. Thanks.
div,
td {
border: 1px solid black;
}
.container {
position: absolute;
}
.w100Pc {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
<div class="container">
<div>Modal dialog header</div>
<table>
<tr>
<td class="w100Pc">rest of space column</td>
<td class="nowrap">content based width column</td>
</tr>
</table>
<div>Here goes main content what should stretch "container" width</div>
<div>Modal dialog footer</div>
</div>
Browser render the code differently i guess it's because they follow different standards, i think Firefox is rendering the code currently in you example and to make it look the same in both browsers just add display:block;
div,
td {
border: 1px solid black;
}
.w100Pc {
display:block;
width: 100%;
font-family:'Times New Roman';
}
.container {
position: absolute;
left: 200px
}
<div style="position: absolute; left:200px">
<table class="w100Pc">
<tr>
<td class="w100Pc">
w100Pc
</td>
<td>buttons</td>
</tr>
</table>
</div>
I am wanting to have a page with a fixed-height header and footer, and with the contents taking 100% of the remaining height.
I currently have the behavior I desire working in Chrome, but in Internet Explorer, the row will grow beyond the desired height, forcing the footer off of the page (as evidenced by the scrollbar on the page). I can't find a fix for the Internet Explorer problem for the life of me.
Here is the desired behavior (in Chrome), note the row does not expand to fit contents, and instead has the ability to scroll:
Here is the undesired behavior I am experiencing with Internet Explorer:
Here is the approach I am taking:
<head>
<style>
body {
margin: 0px;
table-layout:fixed;
}
table {
border-collapse:collapse;
}
table, tr, td {
overflow:hidden;
padding: 0px;
}
</style>
</head>
<body>
<table style="width:100%; height:100%; top:0px; bottom:0px;">
<!--HEADER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#ff0000; text-align:center;">
<h1>Piano Festival</h1>
</td>
</tr>
<!--CONTENTS-->
<tr>
<!--LEFT CONTENT PANE-->
<td style="background-color:#ff00ff;">
<div style="height:100%; overflow-y:scroll;">
<form>
<!--Form contents here-->
</form>
</div>
</td>
<!--RIGHT CONTENT PANE-->
<td style="background-color:#00ffff; width:100%;">
</td>
</tr>
<!--FOOTER-->
<tr style="height:100px;">
<td colspan="2" style="background-color:#00ff00";>
</td>
</tr>
</table>
</body>
I'd prefer to avoid using any Javascript or CSS extensions. How can I work around this problem so that I get the same behavior in IE that I have in Chrome right now (scrollable contents instead of a growing row height)?
I also highly recommend not using tables for this. Here is a refactored version using divs to get you started.
HTML:
<div class="header">
<h1>Piano Festival</h1>
</div>
<div class="registration">
...lots of stuff....
</div>
<div class="main">
Main section
</div>
<div class="footer">
footer
</div>
And here's the CSS:
body, html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.header {
margin: 0;
background: darkgreen;
height: 10%;
}
.registration {
background: deeppink;
width: 20%;
overflow: auto;
height: 80%;
float: left;
}
.main {
display: inline-block;
}
.footer {
background: blue;
height: 10%;
position: fixed;
width: 100%;
bottom: 0;
}
Here's a working demo.
I need to create a layout that has a toolbar, a (variable height) tab line, a content view and an info view. The entire content must always fill the entire browser window, without causing a scrollbar to appear. Only the content and info panels can have scrollbars, and only when they overflow. My layout so far seems to be working in Chrome, but not in Firefox or Internet Explorer. I can't use absolute positions, because the tab line can vary in height, and I would really like to avoid using JavaScript for layout.
Right now I have this markup:
<body>
<table>
<tr>
<td colspan="2" class="toolbar">toolbar</td>
</tr>
<tr class="tabs">
<td colspan="2" class="tabs">tabs</td>
</tr>
<tr>
<td class="content">
<div>content content content content</div>
</td>
<td class="info">info</td>
</tr>
</table>
</body>
And this css:
html, body, body > table {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body > table {
border-collapse: collapse;
border-spacing: 0;
}
body > table > tbody > tr > td {
padding: 0;
vertical-align: top;
}
.toolbar { background-color: red; }
.tabs { background-color: green; }
.content {
background-color: blue;
height: 100%;
}
.content > div {
height: 100%;
overflow: auto;
}
.info {
background-color: yellow;
width: 300px;
}
It must look like this:
Try something like this fiddle
Its more complicated than a regular table layout using CSS, but should work for you with some tweaking.
HTML
<div class='viewport'>
<div class='caption'>
<div class='toolbar'>toolbar</div>
<div class='tabs'>tabs</div>
</div>
<div class='row'>
<div class='content'>content</div>
<div class='info'>info</div>
</div>
</div>
CSS
body, .viewport{
height:100%;
width:100%;
padding:0;
margin:0;
overflow:hidden;
}
.viewport{
display:table;
position:fixed;
height:100%;
}
.row{
display:table-row;
}
.caption{
display: table-caption;
}
.content, .info{
display:table-cell;
}
.toolbar{
background:red;
}
.tabs{
background:green;
}
.content{
background:blue;
}
.info{
background:yellow;
}
I have:
<div id = "first" style="overflow-y:auto;">
<td colspan="2" style="background: #EFF4F8;"><div
id="second" style='height: 100px; word-wrap: break-word; overflow-y: auto; width: 100%; min-width: 580px; line-height: 200%;'>
<pre style="white-space: pre-wrap;">${some_text}</pre>
</div></td>
</div>
if "some_text" width is larger than my screen so I have scroll on all screen, I want the scroll only for div ="second" or for my pre tag. The problem is that I can't change div="first", I have to use it as is. Can you help me?
Thanks,
Your markup seems wrong, but this should be your solution. Let me know how it turns out and I will update the answer to your needs. And use CSS:
CSS
#first {
overflow-y:auto;
}
#second {
height: 100px;
word-wrap: break-word;
overflow-y: scroll;
width: 100%; /* This might still mess up the overflows of parent- and child-tags in different browsers */
min-width: 580px; /* This does not work well in all browsers */
line-height: 200%;
}
#second pre {
white-space: pre-wrap;
}
HTML
<div id="first">
<table>
<tbody>
<tr>
<td colspan="2" style="background: #EFF4F8;">
<div id="second">
<pre>${some_text}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You want to scroll across the width, that is a horizontal scrollbar.
You should be adding overflow-x