Firstly, I realise that many question have been asked on this subject, but I have reviewed all of them (that I can find) and yet none of them appears to solve my problem.
I have a parent DIV (.timeline) that I want to hold a variable number of tables representing months/days. As I scroll horizontally I will dynamically add more months and this works, but I can't get the parent DIV to expand width to accommodate any new tables.
Here is the current HTML:
<div h-buffered-scroll="timeCtrl.adjustTimeline()" class="timeline">
<div class="wrapper">
<table ng-repeat="obj in timeCtrl.tLine">
<thead>
<tr>
<th class="monthhead" colspan="{{obj.days}}">
<div class="fixed">{{obj.monthYear}}</div>
</th>
</tr>
<tr>
<th ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index">
{{$index+1}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="day in timeCtrl.dayRange(obj.days) track by $index"
id="{{obj.y}}_{{obj.m}}_{{$index+1}}"
ng-class="timeCtrl.isWorkDay('{{obj.y}}-{{obj.m}}-{{$index+1}}') ? 'work' : 'hol'">
</td>
</tr>
</tbody>
</table>
</div>
</div>
And here is the relevant CSS:
.timeline {
position: relative;
height: 90%;
width: 95%;
margin-left: 25px;
border: 1px solid #eee;
border-radius: 2px;
overflow-x: auto;
display: inline-block;
}
.timeline div {
min-width: 1000%;
height: 100%;
display: block;
}
.timeline > div > table {
height: 100%;
float: left;
table-layout: fixed;
}
I have the min-width:1000% just to set the parent wide enough to start with but ideally I expect I should not need to set a value for this is should just expand to fit however many child tables I create. What is happening is that the first two tables fit into the 1000% but then the next table (i.e. next month) then goes under the first two tables as it exceeds the width of the parent container.
Below is what I am trying to achieve:
+--------------------+
|+-----+ +----+ +----|--+ table 3 expands beyond parent div
|| 1 | | 2 | | 3 | | and should be able to scroll to see
|| | | | | | |
|+-----+ +----+ +----|--+
+------<-scroll->----+
I've tried to set the display to inline-block on the wrapper but this doesn't help
Related
I have tables like this:
------------------------------------------------
| product-name | icon | text |
------------------------------------------------
| product-info | icon | text |
------------------------------------------------
I want my cells to be flexible according to the last cell content:
------------------------------------------------
| product-name | ic | smt |
------------------------------------------------
| product-info | ic | smt |
------------------------------------------------
-------------------------------------------------
| product-name | icon | big-text |
-------------------------------------------------
| product-info, bla bla bla...| icon | text |
-------------------------------------------------
I tried this css:
table {
table-layout: fixed;
font-size: 12px;
width: 100%;
}
table td:nth-child(1) {
max-width: 70%;
}
table td:nth-child(2) {
width: 10%;
}
table td:nth-child(3) {
max-width: 20%;
}
I put table-layout:fixed, but I can't manage to make the max-width to work. And I don't know how to tell that the last cell is the one to determine the others size.
The product-info content can be very big and I applied an ellipsis it become too large.
The first thing to do is get rid of table-layout: fixed, because that does the opposite of what you want. For the rest, if you want tables to be flexible, don't try to force widths on them!
There's a little trick to make some table cells as wide as their content, while giving the remaining cells the rest of the remaining space: make their width 1px and make sure that they can't wrap by setting white-space: nowrap. Then the rest will come naturally.
table {
border: 1px outset;
width: 100%;
}
th, td {
border: 1px inset;
}
table td:nth-child(2),
table td:nth-child(3) {
white-space:nowrap;
width: 1px;
}
<table>
<tr>
<td>product-name</td>
<td>ic</td>
<td>smt</td>
</tr>
<tr>
<td>product-info</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
<br>
<table>
<tr>
<td>product-name</td>
<td>icon</td>
<td>big-text</td>
</tr>
<tr>
<td>product-info, bla bla bla...</td>
<td>ic</td>
<td>smt</td>
</tr>
</table>
Hope this is what you meant!
Here is the scenario: I want exactly something like stackoverflow's comments. A table contained 3 <td>. one for the number of votes, one for shapes (vote up and flag), one for text of comment. So each <td> has its own property:
VN (Votes Number): If the number not exist, then width = 0;, also the with of this cell should be dynamic. (for every-digit number)
S (Shapes): This cell has fixed width, it should be noted that the visibility of its shapes is hidden in first and they will be show on hover of <tr>, then the width of this cell always should be assigned.
CT (Comment Text): The width of this cell should be all the remaining width. It should be word-wrap: break-word;.
The structure:
+--+-+---------------------------------------------------+
|VN|S|CT |
+--+-+---------------------------------------------------+
example1:
+-+-+---------------------------------------------------+
|4|^|this comment is a test...! |
+-+-+---------------------------------------------------+
example2:
+-+------------------------------------------------------+
|^|this comment has not any voteup ...! |
+-+------------------------------------------------------+
example3:
+---+-+---------------------------------------------------+
|123|^|the width of number of vote up cell should be |
| | |changeable and it should be noted that this cell is|
| | |break-word. |
+---+-+---------------------------------------------------+
Here is my try: But it does not work correctly.
HTML:
<div class="container">
<table>
<tr>
<td class="VN">4</td>
<td class="S">^</td>
<td class="CT">this is a sample.</td>
</tr>
</table>
</div>
CSS:
.container{
width: 60%;
}
table{
table-layout: fixed;
width: 100%;
}
td{
word-wrap: break-word;
vertical-align: top;
}
.VN{
width: auto;
}
.S{
width: 10px;
}
.CT{
width: 98%;
}
As I said, I don't know why my code does not work correctly (It should be noted my container is responsive), How can I fix it ?
Here is a fiddle of what I did.
Your code is correct but when user try to type "sssssssssssssssssssssssssssss" this will count as one word, so you need to add Hyphenation to your CSS code for recognition of long text since you have word-break: break-word;. https://jsfiddle.net/q7o6m2ka/2/
.CT {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding: 5px;
width: 98%;
}
here is a demo you can do it jsfiddle
<div class="container">
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td><span>1</span></td>
<td><a>^</a>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div>
<span>text of the comment</span>
</div>
</td>
</tr>
</table>
</div>
With only this CSS your table works:
http://jsfiddle.net/1485tLf2/1
.container{
width: 600px;
}
.S, .VN{
width: 2%;
}
You don't need the other things. Tables fits automatically with content if you don't specifiy width. To avoid movements of elements and all comments will be symetric, only specify the small columns width. If the votes column needs more space, the table shrinks automatically to fix it without problems
EDIT
In order to complete the code with your comments, here you are new css and fiddle:
.container{
width: 60%;
}
td{
vertical-align: top;
border: 1px solid;
}
td.CT {
word-break: break-all;
}
.S, .VN{
width: 2%;
}
td:empty {
visibility:hidden;
}
See it working: https://jsfiddle.net/rubhxdm1/11/
So I have a table with some text and I want to truncate the text after a certain length. I've achieved this using text-overflow.
.overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
When clicking the table cell I want the whole text to be shown (by changing the height of the row). Like this:
+------------------+ +------------------+
| Header | | Header |
+------------------+ +------------------+
| First text block | --> | First text block |
+------------------+ +------------------+
| A long text b... | | A long text |
+------------------+ | block |
^click +------------------+
I've managed to do that as well.
But I also want to place a + sign after the "..." to show the user that the cell is clickable!
+--------------------+
| Header |
+--------------------+
| First text block |
+--------------------+
| A long text b... + |
+--------------------+
How can I do this? I tried using :after but that only added the + after the whole text.
What I've got so far: http://jsfiddle.net/6qLcrswc/1/
Thanks!
You can just set position absolute on your pseudo-element :
$(".overflow").click(function() {
$(this).toggleClass("overflow");
});
table,
td {
border: 1px solid black;
}
td {
width: 70px;
}
td .overflow {
width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 10px;
}
div {
position: relative;
}
div::after {
position: absolute;
content: " +";
bottom: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="overflow">A long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">Another long textfield</div>
</td>
</tr>
<tr>
<td>
<div class="overflow">The third long textfield</div>
</td>
</tr>
</table>
I advise you to use cursor:pointer; to show the user that the cell is clickable.
To put "+" after that you can do that setting position:relative; to div and absolute to the ::after pseudo selector and managing with right and top.
UPDATE: Exactly like Mehdi wrote
The fiddle for my code is here:
http://jsfiddle.net/wasingej/k2GPw/
I think the problem has something to do with how I specify right/left aligned divs but I'm not sure:
div.right
{
float:right;
margin-right: 2%;
border-style:solid;
}
As you can see, the fiddle produces a jumbled mess of garbage. My goal was to have the page look similar to this:
https://i.imgur.com/DVyk7s6.png
I'm fairly new to css so I'm guessing that my problem is caused by something fairly obvious. Any ideas?
Okay here's a very simple example of doing this with a table. This data appears to be tabular in nature, so while there are wonks who insist a table is NEVER okay, using a table for tabular data is appropriate.
HTML:
<table>
<thead>
<tr>
<th colspan=2>List 1 Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Owner 1 Name:</td>
<td>Owner 1 Status</td>
</tr>
<tr>
<td>Owner 2 Name:</td>
<td>Owner 2 Status</td>
</tr>
<tr>
<td>Owner 3 Name:</td>
<td>Owner 3 Status</td>
</tr>
</tbody>
</table>
CSS:
table {
border: 1px solid;
width: 50%;
padding: 2%;
border-radius: 6px;
}
td {
border: 1px solid;
padding: 1% 2%;
}
td:first-child {
text-align: right;
}
thead th {
text-align: center;
}
The fiddle: http://jsfiddle.net/BUp82/
Your issues are stemming from two things... proper handling of floats and overflows
This forked fiddle should show you your expected results: JSFIDDLE
The main bit of css that you need to add is this:
div.outer
{
//... your existing css ...
overflow: hidden;
}
I also added a 100% wide DIV around the title areas like this:
div.title { width: 100%; overflow: hidden; text-align: center; }
*my fiddle has min-height and min-width set for demonstration purposes
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Two divs, one fixed width, the other, the rest
I want 2 divs side by side, where the right has a random width (this contains another 2 divs - a header with a random text and a body with a random image, all generated by JS) while the left should use the remaining width (this also contains another 2 divs - a header and a body, both containing static text only).
I currently have a solution with 3 tables that was quite simple do come up with, but as I'm recoding all my tables without strict tabular contents to CSS (yes I'm quite a few years late with this) I would prefer to have this in CSS too, if it's at all possible? After searching for a solution for quite some time it seems it may not be...
Worth noting is that the image height is always the same, also the width of every image is specified in the JS.
My current solution (with the JS and more stripped out to be as simple and clear as possible, the image is just an example and may have a width of up to 250px): My fiddle
HTML:
<table class="container" cellpadding="0">
<tr>
<td>
<table class="left">
<thead>
<tr>
<th>Text Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>This just contains text.
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="right">
<thead><tr>
<th>Image Header</th>
</tr></thead>
<tbody>
<tr>
<td>
<img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table.container {
width: 500px;
background-color: #DDD;
border: 1px solid #0F0;
}
.container td {
vertical-align: top;
}
table.left {
border: 0px;
}
table.right {
border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
padding: 3px;
}
.left thead th, .right thead th {
background-color: #00F;
color: #FFF;
font-weight: bold;
text-align: left;
}
.right tbody td {
background-color: #888;
}
Please tell if you also want the JS and my unfinished CSS only solution.
Rather than js, if you use two floating divs, one containing the text and text header, one containing the image and image header, I think it should do what you want:
http://jsfiddle.net/PeyWR/10/
(I lost some of your styling, but I think the idea's there).