This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:
Here is my HTML:
Note: pt-label, dls-combobox and dls-option are my custom made angular components.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table. When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:
What is wrong with my code. Please correct me.
Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element.
since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table
Related
i found the answers. but it doesn't work for me. please take a look at the code and tell me why user avatar is in the middle of the cell and not on the top
<http://jsfiddle.net/7nvku6zp/>
Your selector is wrong
table.tablePost, tr.tablePost, td.tablePost {
border: 1px solid black;
vertical-align: top;
}
Means "apply the following to either a table, tr or td that all have the tablePost class". You don't have any td elements that have this class, only your table has it.
I can't really tell what you want your styles to look like but it might be this:
table.tablePost {
border: 1px solid black;
}
table.tablePost td {
vertical-align: top
}
Which means "apply the border to any table elements with the tablePost class. Apply vertical-align to any td elements that are the children of any tables with the tablePost class."
td.description { vertical-align: top;}
<td class="description">Description</td>
Trying to get a background image to display in a single table cell element in Chrome...and it will, but only when I hover over that cell. If I remove the :hover, it just doesn't display no matter what I do.
I'm asking this question now in the hope that Google has fixed this issue and I haven't seen the answer after searching, or someone has figured it out. The other reason is that there are search results from 2010 and they mostly talk about table row elements instead of single cells.
This fails to give me my image in a table cell:
#matrix td.level {
position: relative;
vertical-align: top;
height: 200px;
width: 150px;
background: transparent url("/images/th-bg-level.png") no-repeat 0px bottom;
}
But I can hover just fine:
#matrix td.level:hover {
background: transparent url(/images/th-bg-level.png) no-repeat -157px bottom;
border: none;
}
It also will show the image if I change to a <th> element, but I don't really want to do that...bad coding practice and all...
Is there a solution to this issue?
Using backgrounds on <td> elements works fine, the issue must be somewhere else.
td {
padding: 30px;
}
td.target {
background: transparent url("http://i.imgur.com/cAN2O2J.jpg") no-repeat 0px bottom;
color: white;
}
<table>
<tr>
<td>John</td>
<td class="target">Doe</td>
</tr>
</table>
The hover state and the non-hover state in your code address completely different folders (/images/ vs ../images/), isn't the problem there?
Fiddle: http://jsfiddle.net/oh78n5r5/17/
I am attempting to render a parenthesized expression using a table with one row and three cells: left, middle and right, where left and right are parentheses and middle is the expression. I would like both the parentheses and the expression text to be properly vertically aligned with an adjoining span representing a function name. So the final result should look like: f(x).
My current approach is to set vertical-align: middle on the table. This aligns the parentheses fairly well, but unfortunately, in chrome the expression text is below the function name.
Is there any css that will allow me to use the HTML I am currently using and will work cross-browser? (The HTML is good because it will allow parentheses to grow with large expressions like fractions).
The html I am using is the following:
<span>f</span>
<table class="paren">
<tr>
<td class="left"></td>
<td class="mid"><span class="x">x</span></td>
<td class="right"></td>
</tr>
</table>
my current css is (paren images are stubbed out):
.left, .right { background-color: gray; }
.paren { display: inline-table; border-collapse: collapse; border-spacing: 0; }
.paren .left, .paren .right { padding: 0px; width: .35em; }
.mid{ }
body { font-size: 24px }
Please check this: jsFiddle. This is the new CSS which I added:
.f {
vertical-align: middle;
}
.mid {
text-align: center;
}
I have a problem in layout in my spring MVC application. In my app, table which is containing in div going out of it even I set a width parameter for this div. I tried many solutions which I googled but without success. Here is my jsp file, CSS file, and screen from my app. As you can see when text in table is long it's not break to new line (as I want).
CSS file:
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
}
#all {
width: 500px;
}
#tablediv {
width: 400px;
float: left;
}
jsp file:
<body>
<h3>All your notes:</h3>
<c:if test="${!empty notes}"/>
<form method="post" action="manage_note">
<div id="all">
<div id="tablediv">
<table>
<tr>
<th class="widther">Note date</th>
<th>Description</th>
</tr>
<c:forEach items="${notes}" var="note">
<tr>
<td class="widther">${note.date} ${note.time}</td>
<td >${note.description}</td>
<td><input type="radio" name="chosen_note" value="${note.note_id}"></td>
</tr>
</c:forEach>
</table>
</div>
<div id="addbutton">
<input name="add_note" type="submit" value="Add note"/>
</div>
</div>
<div id="restbuttons">
<input name="edit_note" type="submit" value="Edit"/>
<input name="delete_note" type="submit" value="Delete"/>
</div>
</form>
</body>
And here is screen:
http://imageshack.us/photo/my-images/203/tableproblem.png/
You'll need to do two things to prevent the table from becoming too large.
1) Set the table-layout to fixed:
table {
table-layout: fixed;
width: 100%;
}
2) Set word-wrap to break-word for td/th
th,td {
border-style: solid;
border-width: 5px;
border-color: #BCBCBC;
word-wrap: break-word;
}
You can see a working example here: http://jsfiddle.net/d6WL8/
I got a simple solution, hope it may help somebody someday.
Any table which is flowing out of its container, just encapsulate it with a div tag with style="overflow:auto"
<div style="overflow:auto">
<table>
.
.
.
</table>
</div>
The answer by hoooman is correct but maybe you mean something else. You can use overflow:auto on that table and also specify a width and it will create scroll bars if the content goes outside of the table.
There is also overflow-x and overflow-y to specify which axis.
If it is long strings of text, like a URL, you can use:
word-wrap: break-word;
this will break the text "wrapped" at the end of the column instead of like break-word which doesn't work out of the box without spaces (e.g long url's)
and add:
overflow-y:hidden;
this will prevent the overflowing text from overlapping the next row
That is because you have 1 word that is about 100 character long, try putting a space in the middle of that and it should fix itself.
set max-width along with word-wrap
Some times adding a Table inside a Div it happens.
In my case i had given padding-right:0px for the <div>
I was also facing this issue , added this class in css and fixed
table {
margin-left:0
}
This is an old question, but I have a simpler method.
Just add this:
th, td {
word-break: break-word; /*or you can use word-break:break-all*/
min-width: 50px; /*set min-width as needed*/
}
the min-width for th or td will not work if your table already set to table-layout:fixed. Just delete it.
or add this if you cannot find old css for table-layout
table {
table-layout:unset !important;
}
make sure you give an additional class / id before the table if you want the code to work only on the page you want.
Example:
.entry-content table {
table-layout: unset !important;
}
.entry-content th, .entry-content td {
word-break: break-word;
min-width: 50px;
}
Hope it can help all of you. Good luck!
Some of the cell values which are part of the table go out of the table.
After trying multiple options given above, reducing the table width to 90% solved the issue.
table {
border-collapse: collapse;
width: 90%;
}
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
td.block {
border: 1px solid black;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.
Looking at the image below, the first image is what the markup produces. The second image is what I want.
I'm not sure if I understand your question, but I'll take a stab at it:
td {
border: 1px solid #000;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
Setting
max-width:100%;
white-space:nowrap;
will solve your problem.
For me, this is the best autofit and autoresize for table and its columns (use css !important ... only if you can't without)
.myclass table {
table-layout: auto !important;
}
.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
width: auto !important;
}
Don't specify css width for table or for table columns.
If table content is larger it will go over screen size to.
There are many ways to do this!
correct me if I'm wrong but the question is looking for this kind of result.
<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>
The first 2 fields will "share" the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
If you are happy to let text wrap you can move white-space:nowrap; to the style of the 3rd field will be the only way to start a new line in that field.
alternatively, you can set a length on the last field ie. width:150px, and leave percentage's on the first 2 fields.
Hope this helps!
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
One option is to replace table with CSS4 flex divs:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
First, setting
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
ensures that your your table cells will stretch.
Now you only need
td.fit {
width: 0;
min-width: fit-content;
}
on your fitting cells.
Note that now the table will only overflow in width if content of all fitting cells is too much to fit into a table-width of 100%.
table {
white-space: nowrap;
width: 100%;
}
td {
border: 1px solid black;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
td.fit {
width: 0;
min-width: fit-content;
}
<table>
<tr>
<td class="stretch">this should stretch</td>
<td class="stretch">this should stretch</td>
<td class="fit">this should be the content width</td>
</tr>
</table>
Simple :
<div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>