Bootstrap table custom width on each column - css

How to set the width of bootstrap table?
I tried to use class="col-md-2", it does not effect the width. The table class seems to have its width equal to display width.
In my case, i have a lot of information to be displayed through the table which is will exceeded the width of the display, hence i need to have the horizontal scrollbar.
This is the last code i have tried.
<table class="table">
<tr>
<th class="col-md-1">Action</th>
<th class="col-md-2">Description</th>
</tr>
<tr ng-repeat="x in Tablelist track by $index">
<td>
<div class="btn-group">
<button class="btn btn-primary btn-xs" ng-click="Opensetprice(x.id,x.matcode,x.pr_qty)">$</button>
<button class="btn btn-danger btn-xs" ng-click="Delete(x.doc_no,x.item_no, $index)">X</button>
</div>
</td>
<td>{{x.material}}</td>
</tr>
</table>
tried to override the class table width with width:auto;, does not do any help.

Give your table parent overflow: auto;

The Bootstrap's col-xx-n classes are not supposed to be used with <table> tags. These calsses are designed to be used on elements that can be re-positioned based on viewport size. But since the rows/cells inside a <table> cannot be made to re-position it just doesnt work.
What you must be looking for is...
A column width in % .
min-width for some specific columns whose content should not be shrink-ed after a certain width.
Note:- A table exhibits responsive behavior inherently. You just need to make judicious use of %width.

Bootstrap table should adjust it's width according to it's content,you don't need to adjust width with css properties or inline style.
I can help you more if you share a screenshot what you require actually.

Try to add this in your CSS:
.table tr th:nth-child(2) {
width: 80%; /*Custom your width*/
}
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

Related

td element is wider than its max-width property [duplicate]

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
<style>
td{max-width:67%;}
</style>
The above does not work. How can I set the max-width of a table cell using percentages?
Old question I know, but this is now possible using the css property table-layout: fixed on the table tag. Answer below from this question CSS percentage width and text-overflow in a table cell
This is easily done by using table-layout: fixed, but a little tricky because not many people know about this CSS property.
table {
width: 100%;
table-layout: fixed;
}
See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/
According to the definition of max-width in the CSS 2.1 spec, “the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” So you cannot directly set max-width on a td element.
If you just want the second column to take up at most 67%, then you can set the width (which is in effect minimum width, for table cells) to 33%, e.g. in the example case
td:first-child { width: 33% ;}
Setting that for both columns won’t work that well, since it tends to make browsers give the columns equal width.
I know this is literally a year later, but I figured I'd share. I was trying to do the same thing and came across this solution that worked for me. We set a max width for the entire table, then worked with the cell sizes for the desired effect.
Put the table in its own div, then set the width, min-width, and/or max-width of the div as desired for the entire table. Then, you can work and set width and min-widths for other cells, and max width for the div effectively working around and backwards to achieve the max width we wanted.
#tablediv {
width:90%;
min-width:800px
max-width:1500px;
}
.tdleft {
width:20%;
min-width:200px;
}
<div id="tablediv">
<table width="100%" border="1">
<tr>
<td class="tdleft">Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>
</div>
Admittedly, this does not give you a "max" width of a cell per se, but it does allow some control that might work in-lieu of such an option. Not sure if it will work for your needs. I know it worked for our situation where we want the navigation side in the page to scale up and down to a point but for all the wide screens these days.
the percent should be relative to an absolute size,
try this :
table {
width:200px;
}
td {
width:65%;
border:1px solid black;
}
<table>
<tr>
<td>Testasdas 3123 1 dasd as da</td>
<td>A long string blah blah blah</td>
</tr>
</table>

CSS chat layout not working

Hello I am trying to make an online chat application.
I have the html:
<body>
<table align="center" width="80%">
<tbody class="scroll">
<!--All of the chat-->
</tbody>
<tbody class="formheight" style="width:100%">
<tr>
<td>
<form style="width:100%" action="Write-to.php" method="post">
<input autocomplete="off" name="txt" type="text" id="usermsg" style="font-size:2.4vw;" value="" />
</form>
</td>
</tr>
</tbody>
</table>
</body>
And the css:
html, body
{
height: 100%;
max-height:100%;
overflow: hidden;
}
table
{
height: 100%;
}
tbody {
overflow: auto;
width:100%;
}
thead > tr, tbody{
display:block;
}
I want the 2nd tbody (The one that contains the form) to lie at the bottom of the page and the first to fill the rest of the page upwards.
Currently I am having to use jquery to (kind of) do what I want. Currently the form is half hidden. I would rather do this all with CSS so that it works better with mobile devices.
How could I do that?
Jquery:
var heighty = $(window).height();
var height = $('.formheight').height();
$(".scroll").css("height", heighty - height + "px");
I also can't for the life of me get the form text input to be 100% width?
Please see JSfiddle
I am also very open to another way of laying out this chat app all together!
This is possible in CSS, but would be very difficult to get working across all browsers. Instead, here is my recommendation:
Create an element that fills up 100% height with a bottom padding set to X px.
Create an element with position:fixed and a height of X px.
Give the latter element a z-index:2 and the former a z-index:1. z-index doesn't need to be assigned manually, elements further down in source code automatically have a higher priority and are displayed over previous elements (if they overlay visually).
If you want, you could use a different unit. Percents are very easy because you can have them add up to 100%, so no need for a margin. Of course each has its respective drawbacks, but in my experience what I've described generally has good compatibility and displays comparably on all devices. You could even use CSS #media queries to change the height, X, for different devices.
You need to use something what we call a "Sticky Footer", In your case, your second body goes in the sticky footer. Have a look at this http://ryanfait.com/sticky-footer/ or this http://www.cssstickyfooter.com/ for the css+html for a sticky footer

prevent div resizing because of inner text

Here is my code:
<div>
<table>
<tr><td>
<img ...>
</td></tr>
<tr><td>
<p style="text-overflow: ellipsis;white-space: nowrap;">HERE MAY BE SONE VERY LONG TEST!!!</p>
</td></tr>
</table>
</div>
I want the width of my div as wide as my image, but since I don't know how wide my image is, I can't specify a width for the p to keep it in bounds.
I am looking for an html(+css) only solution, if there is any. I know how I could accomplish this in js, but that gets messy since the image size is changed over time.
Is there a way to do this in pure html/css?
You could simply set the width of the table to be very small:
FIDDLE
table
{
width: 1px;
}

CSS scrollable table with fixed header, but using the browser scrollbar, not overflow

This is what I've done. http://jsfiddle.net/FeHdS/5/
As you can see, when you use the browser scrollbar the whole table goes behind the "mainwrapper" div. I would like to have my table with a fixed header and I don't want to use overflow scroll.
What I tried was to simply assign a fixed position to thead.
thead{
position: fixed;
}
but then, the first row of the table takes the header place.
Is there a way to do that only with CSS? If not, what would be the best solution?
You can do this using CSS with javascript.
Basically, you use CSS to position the table and table header row, and to trick the table into behaving like divs. Then use javascript to manipulate the CSS positioning of the table header row and a "mask" div that hides the regular table rows as the table scrolls. Because your table now thinks it's divs and sizes the cells without matching them up in width, you also need to use CSS to set the widths so that the table header widths match the td widths.
The relevant components are:
<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
It is fairly complex, and takes more than a minute or two to implement. I did it for an app where I was going to re-use it often. Here is a demo in jsFiddle (contains the CSS and javascript as well as html): http://jsfiddle.net/deborah/Msvvr/

text-align on a table in a cell (<table> inside a <td>)

Here's something I never thought I'd say: I have a problem in Firefox and Chrome, but it's working fine in IE!
It's very simple, but I don't understand why it doesn't work:
I have a table inside a cell, and I have style="text-align:right" on the cell, but the table is staying left in Firefox and Chrome (in IE it's obediently going to the right...). If I put align=right in the cell tag then it works, but I don't want to do that.
Code is basically:
<table width="1000" border="1" cellpadding="0" cellspacing="0">
<tr>
<td style="text-align:right">
<table border="1">
<tr><td>Hello</td><td>Hello 2</td></tr>
</table>
</td>
<td>Hello 2</td>
</tr>
</table>
I don't want the nested table to be width=100% or anything like that...
Could anyone please explain to me why it doesn't work, and how to fix it, and maybe why it works in IE but not Firefox or Chrome?
My guess is that Chrome and FF are actually the ones rendering it correctly. text-align probably isn't supposed to affect table elements. However, applying float:right to the table will do what you want.
I would like to add that the CSS way to align tables relative to its container is with the margin property.
You must add margin: 0 auto; if you'd like to align it to the center, or margin-left: auto; if you'd like to align it to the right.
As #maxedison says, text-align will work only with inline and inline-block elements, so the other solution is change your inner table to take some of those display values.
You also need to remember that text-align works from 'container-to-content', this means it is normally applied to a container to affect its content (applied to a p to affect its inline content such as the text within), and margin: 0 auto works from 'content-to-container', meaning that it's normally applied to a block element and affects its position related to its container (applied to a div to center it to its parent).
If you want to fix it (not with full functionality), you can write this:
table {
display: inline-block;
}
This makes your table able to be centered with text-align: center;, if applied to the parent element(s).
when you don't want the div to be floating, you may try this :
http://jsfiddle.net/NvEZ8/
<div style="text-align:right;">
<table style="display:inline-block">
<tbody>
<tr>
<td></td>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
</div>
It looks like text-align (with a DOCTYPE html) only affects inline-block in Chrome and not inline only element. Replacing inline-block by inline here and it doesn't work anymore on my Chrome

Resources