I want to achieve two things:
1. Table cell content should not wrap in second line unless separated by "br" tag.
2. Table header columns should remain fixed with scrollable table.
HTML:
Popuup
<br><br>
<div style="position:relative">
<div id="search-history-popup" style="display:none; position:absolute">
<div>
<table class="table table-bordered table-hover">
<tbody>
<tr>
<th colspan="2">Criteria</th>
<th>Results</th>
</tr>
<tr><td>Long Name<br/>Short Name</td><td><b>Sample Personal (PFA)</b><br/>Sample (PFA)</td><td>1</td></tr>
<tr><td>Long Name</td><td><b>Longer text Sample Personal (PFA)</b></td><td>1</td></tr>
<tr><td>Long Name</td><td><b>More n more text to checj width Sample Personal (PFA)</b></td><td>1</td></tr>
<tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
<tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
<tr><td>Long Name</td><td><b>Sample Personal (PFA)</b></td><td>1</td></tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
body {font:normal 12px Arial}
.table {
margin-bottom: 5px;
padding:0;
}
.table-bordered {
margin-top: 5px;
}
.table-bordered th {
background-color: #f9f9f9;
border:1px solid green;
padding: 4px 8px;
}
.table-bordered td {
line-height: 2em;
padding: 4px 8px;
border:1px solid green;
}
.table-hover > tbody > tr:hover > td {
background-color: #EEFFE1;
cursor: pointer;
}
.innertable {height:250px; overflow:auto; border:1px solid #000;}
JS Fiddle links:
Without scrollbar - table data is not wrapping up:
http://jsfiddle.net/L4j1vab2/1/
But as soon as I apply scrollbar through fix height and overflow, table data is getting wrapped.
http://jsfiddle.net/L4j1vab2
Please click on the link "Popuup" to see the popup-table:
My requirement is table data should not wrap, and table data should be scrollable keeping table headers fixed.
Add white-space: nowrap; to your TD and TH styling to prevent wrapping:
.table-bordered td {
line-height: 2em;
padding: 4px 8px;
border:1px solid green;
white-space: nowrap;
}
Fixed header row:
You can't do that with HTML/CSS. I've done it myself by creating a copy of the header row DOM in a fixed DIV hovering above and on top of the table DIV using Javascript. The JS code also needed callbacks to properly react to window resizing.
Another solution would be to fix the width of the table and its columns, and create a 2nd table just above the existing one with the same widths with just the header row.
Related
I upload data in table using ajax. so when I received response - data will be filled to table and it will be visible on the screen. when data contain some small text example it looks ok. but if I upload file with 40 records which contains full text then width of screen increases in few times, scroll-x is going visible but it looks like table and huge empty space on screen.
I've checked all text and data in table. everything is inside table. someone know what can be the reason of problem?
I can fix this if add property overflow-x: hidden; on my div that wrap table. but this solution really bad)
It works the same on Chrome and Mozila
<div id="trainData" style="display: none" class="my-table">
<table class="table table-striped" id="trainTable">
<thead class="thead-inverse-blue">
<th class="inputText" >Input</th>
<th data-field="comment" >Comment</th>
</thead>
</table>
</div>
.table{
margin-top: 10px;
table-layout: fixed;
width: 100%;
margin-bottom: 0 !important;
border-bottom: 1px solid #dddddd;
border-collapse: collapse !important;
border-radius: 1px;
}
.table > tbody > tr > td {
width: 1px;
white-space: pre-wrap;
word-wrap: break-word;
}
.fresh-table .table > tbody > tr > td >content{
text-overflow:ellipsis;
overflow:hidden;
}
The problem was in decision to add white-space: pre-wrap; property. It occur scrolling and huge width. Changed to white-space: pre-line; and problem missed :)
I've made a table with border collapse applied to it. This is standard in the css for all of our tables.
My new table requires a small section beside the row header to be a color. Because the td tag has padding on it, a div doesn't stretch the full distance. Same problem would apply to adding a new table cell to contain only the colored bit.
The idea was that adding a border would solve the problem, and it would work, except for the border-collapse. So the problem is demonstrated here http://jsfiddle.net/dtv6P/ where you can see the left border specifically applied to the one cell, is outside the visible bounds of the table. I've tried to apply "border-collapse: separate" to the cell but that doesn't seem to work, so any ideas?
edit* the color is selected from an array based on the line of data
basic idea code (not my actual code)
<head>
<style>
td {
border: 2px solid black;
padding: 4px;
}
table {
border-collapse: collapse
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td style="border-left: 10px solid;">1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
I found this link http://www.w3schools.com/cssref/pr_border-collapse.asp and found it to be helpful.
<head>
<style>
table {
border-collapse: collapse
}
table, td {
border: 2px solid black;
padding: 4px;
}
</style>
</head>
<body>
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
</body>
Here's something that works... but you need to know the height of your contents... it's not very convenient, but works.
<table>
<tr><td>1a</td><td>2a</td><td>3a</td></tr>
<tr><td><div class="withColor"></div>1b</td><td>2b</td><td>3b</td></tr>
<tr><td>1c</td><td>2c</td><td>3c</td></tr>
</table>
with your css
td {
border: 2px solid black;
padding: 4px;
height:20px;
}
td div.withColor {
position:absolute;
margin:-4px 0 0 -4px;
border-left:4px solid red;
height:28px;
}
My question is simple. In this jsfiddle: http://jsfiddle.net/nyCKE/2/ I have a atable which contains a scroll bar and the table scrolls with fixed headers. But what my question is that I don't want the scroll bar to be displayed underneath the last column as it is, I want it displayed next to the last column so that it does not take up some space next to the last table column. But what do I need to change css/html in order to be able to do this?
Below is HTML:
<table>
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
Below is CSS:
table {
background-color: #aaa;
}
tbody {
background-color: #ddd;
height: 100px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead > tr, tbody{
display:block;}
tbody{
width: 110%;
}
This needs to be tested though
Hello all I'm just trying to have my border around my table cell right around the text...not stretched the length of the entire table. Its the section with the border around it
CSS:
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
}
HTML:
<table class="content_table">
<br/><br/>
<h1>Planned Vs Actual Productions Drilldown</h1>
<tr>
<td class="results">
Number of results returned: ${fn:length(beans)}
</td>
</tr>
give the text a simple span or any other block element like div p ... span with inline-block is also a block element which can have a border.
table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
.border {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;
display: inline-block;
}
Any Element inside a table needs to be in TD so that is is valid html... put another tr > td into your table like this
<table class="content_table">
<tr>
<td>
<h1>Planned Vs Actual Productions Drilldown</h1>
</td>
</tr>
<tr>
<td class="results">
<span class="border">Number of results returned: ${fn:length(beans)}</span>
</td>
</tr>
</table>
The answer lies in the fact that you have table width as 100%. Without any of styling at the TD level, the TD is automatically going to take the most width it can.
The bigger question though, is why you are using a table at all. This is a single column of data, no need for a table here, just use div's.
I had a similar problem with a WordPress theme. The "collapse" wasn't entirely working on the first column, because my theme's style.css "reset" had set the table width to 100%. At least for me, the "auto" width solved the problem.
<style>
table#donations { border-collapse: collapse; width:auto; }
</style>
<table id="donations">
<tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>
So I am styling a table, and I'd like to make quite a fancy underline for the table headings.
I've though hard and had a look on the internet but couldn't find anything.
This is the table structure:
<table>
<thead>
<tr>
<td>Number</td>
<td>Name</td>
<td>Address</td>
</tr>
</thead>
<tbody></tbody>
</table>
And my current styling:
table {
width: 100%;
}
table thead {
font-weight: bold;
}
table thead td {
margin-right: 5px;
border-collapse: separate;
border-spacing: 10px 5px;
border-bottom: 2px solid #427AA8;
}
table tbody {
font-size: 90%;
}
table tbody tr {
line-height: 2em;
border-bottom: 1px solid #CCC;
}
table tbody td {
padding: 0 5px;
}
Here is a jsfiddle of the code: http://jsfiddle.net/tYA4e/1/
What I am looking for is a break in the border between the columns, but only in the thead.
And an example of what I am trying to achieve: http://i.imgur.com/OHrhJ.jpg
Is there a way to achieve this with some simple CSS?
A border will, necessarily, extend the full width of its element; therefore to extend a border only partially across the width of an element that border must be applied to a child element, sized accordingly.
That said, the only way this is achievable would seem to be with nesting an element within the td (in this case a span), and using the following CSS:
table thead td span {
display: inline-block;
width: 80%;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
As an aside, though, it's worth noting that, for table-headings, the th (table-heading) element might be more appropriate for your use in this case.
On further thought it is, of course, also possible to use styled hr elements, which allows you to give pixel-level control over the hr's width in that it can extend up to, in this example, 10px from the right edge of the parent td):
table thead td hr {
width: 80%;
margin: 0 10px 0 0;
border-bottom: 2px solid #427AA8;
}
JS Fiddle demo.
You could also use th for heading cells -> no more need for seperating the rows into groups with thead and tbody - less markup and less css.
<table>
<tr>
<th>headlinecell</th>
</tr>
<tr>
<td>contentcell</td>
</tr>
</table>
now just style the th and td.