I am using angular js 1.3 here. What I have is a modal up which when clicked adds an column to existing table, the name of the column is based upon the selection made in the modal. One can add as many columns here. All this works fine. What my issue is that I am not sure how to maintain fixed column width and scrolling.
The width of the column keeps decreasing when more columns are added and even the scrolling does not comes out properly.
Sorry the code is a lot so just posting some code together with jsfiddle here:
http://jsfiddle.net/aman1981/u1vbeos5/107/
<div class="panel-body">
<table class="table table-bordered">
<colgroup>
<col class="unique-id">
</colgroup>
<thead>
<tr>
<th class="unique-id">Name #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<!--<th class="view-next-set">...</th>-->
<td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td contenteditable="true" class=""></td>
<td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
<!--<td class="blank" colspan="2"></td>-->
</tr>
</tbody>
</table>
</div>
Also here is the image:
https://imgur.com/a/qCn1AO7
So you can set a minimum width fot your .table td and .table th
.table td,
.table th {
min-width: 120px;
}
And you can set the overflow of you .panel-body as auto:
.panel-body {
overflow: auto;
}
http://jsfiddle.net/u1vbeos5/116/
You have to set min-width and max-width to th and oveflow: auto to .panel-body....
Check below CSS
.table th {
max-width: 120px;
min-width: 120px;
}
.panel-body{
overflow: auto;
}
What I end up doing was to add the below classes to TD and Panel:
.fixed-width {
min-width: 50px !important;
width: 50px !important;
}
.panel-body {
overflow: auto;
}
Related
I want that a table column uses the minimum of place but after a certain width, it should wrap.
Here is what I have:
<table id="#table">
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
<style>
#table{
width: 100%;
}
.min {
width: 1%;
white-space: nowrap;
}
</style>
This makes the column use only the place which it needs but it it ets too long, it will make the table endless longer and I want to set the maximum of the allowed space.
Edit:
I think that with js it would be possible to calculate the width and change the css but I would prefer a solution without javascript or jquery.
Edit 2: I forgot to mention that the table has a width of 100%. So if I follow the given answer, the table cell has its autowidth (which is too wide) and a max-width so if the text is short, the td has a white space which I do not want.
Edit 3: Here is an image which explains better than me.
#billTable{
width:100%;
}
#numberTd{
text-align: center;
width:18%;
}
#weightTd{
text-align: center;
width:20%;
}
#nameTd{
text-align: left;
width: 1%;
white-space: nowrap;
}
#kgPriceTd{
text-align: right;
width:20%;
}
#priceTd {
text-align: right;
}
<div style="width:550px;">
<table>
<tr>
<th id='numberTd'>Packetzahl</th>
<th id='weightTd'>Kg</th>
<th id='nameTd'>Artikel</th>
<th id='kgPriceTd'>CHF / Kg</th>
<th id='priceTd' colspan="2">Total</th>
</tr>
<tr>
<td id='numberTd'>1</td>
<td id='weightTd'>0.688</td>
<td id='nameTd' class='min'>Siedfleisch</td>
<td id='kgPriceTd'>44.00</td>
<td id='priceTd'>8.2</td>
</tr>
</table>
</div>
You can control max width of an element by using max-width
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width.
.min {
max-width: 200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
You can apply width in percentages for the flexible columns, space it out so it looks good or make your table not 100%
Use the CSS property "max-width". I've attached an example with a border that shows this in use.
table, td {
border:1px solid #555;
border-collapse:collapse;
}
.min {
max-width:200px;
}
<table>
<tr>
<td>Content with a fix with</td>
<td class="min">This content should only use the necessary place but wrap after 200px</td>
</tr>
</table>
I have this table that I want to spruce up a bit, but am having no succes despite the solutions I have found all across Stackoverflow.
I am using PHP to echo the table, with some some data from an SQL db.
As you can see in the bottom right, the browser does not see the styling I have added for overflow etc..
Below is the html:
<div class="span9">
<div class="container">
<a class="btn" href="records.php">Add New Record</a><br><br>
<table class="table table-hover table-condensed" border="1" cellpadding="10">
<tbody>
<tr>
<th class="th.id">ID</th>
<th class="th.status">Status</th>
<th class="th.cust">Customer</th>
<th class="th.prod">Product</th>
<th class="th.ord">Order Number</th>
<th class="th.ret">Return Code</th>
<th class="th.dop">Date of Purchase</th>
<th class="th.sn">Serial Number</th>
<th class="th.prob">Problem Description</th>
<th class="th.rep">Repair Description</th>
<th class="th.part">Parts Used</th>
<th class="th.com">Comments</th>
</tr>
<tr>
<td><p>1</p></td>
<td><p>Error!</p></td>
<td><p>Jesse</p></td>
<td><p>Fuse</p></td>
<td><p></p></td>
<td><p></p></td>
<td><p></p></td>
<td><p>ComicalCanary</p></td>
<td><p>Not enough sand</p></td>
<td><p>Added sand</p></td>
<td><p>sand 10kg</p></td>
<td><p>I want to put a lot of content into this, to see how far this will go in stretching the table.</p></td>
</tr>
</tbody>
</table>
</div>
And below is my css, i'm using Bootstrap 3.3.7, but this is what I'm adding:
.table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
table-layout: fixed;
}
.table td {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And even the width: 120px; is not even working...
Any clues anyone?
You have to move your ellipsis styling down to the p tag.
.table p {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
https://jsfiddle.net/koralarts/y6q3uvkL/1/
Set the max-width on your td css or put a div inside the td with the ellipsis on the div instead. Or set the p width to a fixed number and put the text overflow rule on that.
Table cells are a bit difficult in this regard, text overflow works with block elements (p, div, etc) in the inline direction. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow
Move both overflow: hidden; and text-overflow: ellipsis; from .table td to a new rule for .table td p, like
.table td {
width: 120px;
white-space: nowrap;
}
.table td p {
overflow: hidden;
text-overflow: ellipsis;
}
Here's the whole thing in a codepen: https://codepen.io/anon/pen/dJPgNZ
I'd like to set width on the td in tbody which is underneath thead that has colspan="2" with an hard defined column width in %. The browser shell not dynamically adjust table width.
.sample {
width: 100%;
table-layout: fixed;
}
.sample td:nth-child(1),
.sample th:nth-child(1) {
width: 30%;
}
.sample td:nth-child(2),
.sample th:nth-child(2) {
width: 70%;
}
<table class="sample" border="1">
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>30%</td>
<td>70%</td>
</tr>
</tbody>
</table>
The above style works if thead is removed but does not work with it.
Important notes,
I added the table-layout: fixed; since I need the columns to be exactly as width as specified. Using table-layoud: auto; results in the browser taking the specified width as on orientation but still dynamically adjusting width.
EDIT
The accepted answer solved my question above. However I'm not able to use colgroup since I'm using a WYSIWYG editor. Thus I added a follow up question with detailed specifications here.
Try using <colgroup> and <col> tags:
.sample {
width: 100%;
table-layout: fixed;
}
<table class="sample" border="1">
<colgroup>
<col style="width:30%;">
<col style="width:70%;">
</colgroup>
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>30%</td>
<td>70%</td>
</tr>
</tbody>
</table>
just change your css that is so confusing for me. change it to follow
.sample {width: 100%;}
.sample td:nth-child(1) {width:30%;}
.sample td:nth-child(2) {width:70%;}
of you wish that table looks good then you can give border so that u have clear idea about it.
<table class="sample" border="1px grey solid">
..
</table>
thead{
width: calc(100% - 17px);
display:block;
}
tbody{
display:block;
overflow-y: auto;
height:100px;
}
http://jsfiddle.net/mkgBx/
I can adjust width of thead to match that of tbody + scrollbar.
However, in cases when scrollbar is not displayed, tbody stretches further to the right.
Is there any way to fix tbody width?
I don't think you can set the tbodys width to ignore the presence of the scrollbar. Would a change to the structure of the mark-up be acceptable?
CSS
table{
font: 11px arial;
width: 245px;
}
th, td{
border:1px solid #000;
}
div {
height:90px;
width: 262px; /*table width + 17px */
overflow-y: auto;
}
HTML
<table>
<thead>
<tr>
<th style="width:165px">Name</th>
<th>Country</th>
</tr>
</thead>
</table>
<div>
<table>
<tbody>
<tr>
<td style="width:165px">Mart Poom</td>
<td>Estonia</td>
</tr>
<tr>
<td>David Loria</td>
<td>Kazakhstan</td>
</tr>
<tr>
<td>Wojciech Szczęsny</td>
<td>Poland</td>
</tr>
<tr>
<td>Gianluigi Buffon</td>
<td>Italy</td>
</tr>
<tr>
<td>Igor Akinfeev</td>
<td>Russia</td>
</tr>
</tbody>
</table>
</div>
http://jsfiddle.net/nF2NL/1/
This allows the div to provide the scrolling and the table to remain a set width.
You need to use JavaScript to handle this. Check if the scrollbar appears and adjust the width of the tbody accordingly.
Here's the JS code relevant to this where t is the tbody element:
if (t.clientHeight == t.scrollHeight)
{
t.style.width = "224px";
}
I've modified your JSFiddle to show you how it can work in your case.
I would not explicitly declare the <tbody> and <thead> tags for your table, as this is unnecessary. One solution to your problem would be to make the row (<tr>) of <th>s position: fixed. Someone else had a similar problem here: How to make a tables header static when scrolling
with width 100% it adapts to the table with, doesn't matter if it has a scroll or not.
thead{
width: 100%;
display:block;
}
I need an html table with fixed header and scrollable content. I am working using spring and jsp. The code is something like
<table class="resultsTable" border="1" bordercolor="grey" cellpadding="0" cellspacing="0" width="100%" height = "50%">
<thead class="fixedHeader">
<tr>
<th width="20%">Name</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
</tr>
</thead>
<tbody class="scrollContent">
<c:forEach var=" object" items="${objectsList}"
varStatus="loopStatus">
<tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
<td width="20%">${ object.name}</td>
<td width="20%">${ object.param1}</td>
<td width="20%">${ object.param2}</td>
<td width="20%">${ object.param3}</td>
<td width="20%">${ object.param4}</td>
</tr>
</c:forEach>
</tbody>
</table>
and css is
table.resultsTable {
width: 900px;
border: 2px solid grey;
border-radius: 8px;
}
thead.fixedHeader tr {
position: relative;
display: block;
width: 100%;
background-color: grey;
}
tbody.scrollContent {
display: block;
height: 350px;
overflow: auto;
width: 100%;
}
What i expect is column width must be the same. But I get columns with decreasing widths ie. column1 has greatest width and then goes on reducing. 5 th column being smallest width. Why is this happening?
please remove the width attribute form both tbody and thead.
Also remove the width attribute in as you have already set the width in
means 20% width of the table i.e. 20% of 900px.