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;
}
Related
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.
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
I have a webpage that looks like:
<table>
<tr>
<td style=white-space:nowrap>
lots of content...
</td>
<td>
some more content
</td>
</tr>
</table>
This works nicely. The left column takes up as much width as it needs and the right column takes up as much as it can. The right column includes a lot of automatic line-wrapping.
I'd like to do this in pure CSS because semantically speaking there's nothing tabular. But everything I try either requires hard-coding widths or puts the right column underneath the left column. Is there a way?
Float the left column, and make the right column non-floated with overflow:hidden. This will cause the right column to automatically fill the remaining width, without wrapping around below the left column.
JSFiddle Demo
.column1 {
float: left;
}
.column2 {
overflow: hidden;
}
This trick tested fine in all browsers except IE6 (which shouldn't matter at this point).
You can use the CSS display:table-cell rule to simulate the table layout.
<div style=white-space:nowrap>lots of content... lots of content... lots of content... lots of content... lots of content... lots of content... lots of content...</div>
<div>some more content</div>
div {
display:table-cell;
vertical-align:middle;
}
jsFiddle example
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/
I browsed some other questions, but couldn't find something that fixes my issue.
I created a code snippet here:
http://jsfiddle.net/manoj382/3SeB7/embedded/result/
I have a table with one row and six cells. The width of each td/cell is defined and it matches the width of the image inside of it (the width of each image is defined, too). Everything works fine, but when I zoom in or out in the browser, white gaps appear somewhat sporadically.
I tried removing white space in the code, I defined the width and height, the images are set to display:block, the total width of each cell/image matches the total width of the entire table, which is also defined. The client is being picky about the gaps when zooming, though, and I'm out of ideas.
*This is for an HTML newsletter, which is why I'm using the old school table layout method.
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="31">
<img src="http://placekitten.com/g/31/64" style="width:31px; height:64px;">
</td>
<td width="65">
<img src="http://placekitten.com/g/65/64" style="width:65px; height:64px;">
</td>
<td width="411">
<img src="http://placekitten.com/g/411/64" style="width:411px; height:64px;">
</td>
<td width="64">
<img src="http://placekitten.com/g/64/64" style="width:64px; height:64px;">
</td>
<td width="29">
<img src="http://placekitten.com/g/29/64" style="width:29px; height:64px;">
</td>
</tr>
</tbody>
</table>
The relevant css:
<style type="text/css">
img {display:block !important;}
</style>
While zooming in/out, the browser has to round the box widths to integers. You cannot assume that things will always be properly aligned.
One solution could be to use float: left boxes instead of table cells so that the boxes are always guaranteed to be flush against each other.
Another solution could be to use background images instead of <img> tags as #user1760422 mentioned in a comment above. You could make the images slightly wider than the cells or just allow background-repeat: repeat-x to show a patch of pixels instead of a white strip between the images.
I cannot explain why it's doing this (I'm able to duplicate it on my Mac). But I do have a fix.
For some reason, your table cell with the width of 411 pixels is showing as 412px wide. The image is also showing as 412px wide, even though the image itself is only 411px wide. You can see this if you run Chrome Dev Tools and mouse over the table cell. It will show that it has an actual width of 412 for some reason that I cannot explain.
If I delete the table width of 600 at the top, the problem goes away.
Change this:
<table width="600" cellpadding="0" cellspacing="0" border="0">
to:
<table cellpadding="0" cellspacing="0" border="0">
See: http://jsfiddle.net/3SeB7/1/embedded/result/
The issue is your sliced images are sometimes odd integers. If you change the image slice widths to an even number (and of course in the widths in the img and td tags), it should eliminate the gaps at certain zoom levels.
insted of giving width in the table, try giving the width in the style tag:
Insted of
Try the below
<table style="width:700px" cellpadding="0" cellspacing="0" border="0">
I just had a similar issue. What the browser is doing is increasing the <td> cells so that combined they fill the whole width of the table, which is causing the white space between the image which is XXpx and the td which is now XX.2313px. You can fix this by setting the min-width of all your images to 100%.