I have one entire column of a table who's header consists of a question and in the following rows contains only a checkbox...
------------------------------------------------------
| Would you like this text to wrap ? | <rest of row> | <-- <th>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
It looks unsightly to me. Can I use any markup to "encourage" browsers to render it like this...
---------------------------
| There, | |
| isn't | |
| that | <rest of row> | <-- <th>
| nicer? | |
----------+----------------
| [] | | <-- <tr>
----------+----------------
| [] | | <-- <tr>
----------+----------------
Please note that I do NOT want to force the browser into a particular rendering, just to suggest something - or to be told that it is not possible.
Any solution must work in MS IE 7.
I guess the best you can do is giving a width to the chosen th
here some example code: http://jsfiddle.net/karameloso/aMTNH/
Set width for that column like:
table#my-table th:first-child {width: 4em}
Here is an example
UPDATE.
Changed px to em's as Brock Adams suggests
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
Tables that used to appear like this in Chrome:
----------------------------------
| Header A | Header B | Header C |
----------------------------------
| Item 1 | | |
----------------------------------
| Item 2 | Stuff 1 | Stuff 2 |
----------------------------------
...after upgrading Chrome to v65 now appear like this:
---------------------------------------------
| Header A | Header B | Header C | |
---------------------------------------------
| Item 1 | Item 2 | Stuff 1 | Stuff 2 |
---------------------------------------------
Firefox v59 also renders the table this last way, so this probably only suddenly affects those who have Chrome-only systems.
The source might look something like this:
<table>
<tr> <th>Header A</th><th>Header B</th><th>Header C</th> </tr>
<tr> <td rowspan="0">Item 1</td> </tr>
<tr> <td rowspan="1">Item 2</td><td>Stuff 1</td><td>Stuff 2</td></tr>
</table>
Chrome used to render a row with an attribute rowspan="0" as either 0 height or 1 height. Chrome v65 now renders it 'properly' as given in the html spec here. This means that the entry now fills the first column, pushing all following entries into the next column and so out to the right.
This may be caused by, for example, html renderers that calculate how many rows a cell might take according to a list of sub-items, when that list is empty. (For example improve-foundation's struts-layout does this; it does not appear to have been maintained since 2011 and attempts to register on the site fail me for now)
Consider the following HTML table:
<table>
<thead>
<th class="col one">One</th>
<th class="col two">Two</th>
<th class="col three">Three</th>
<th class="col four">Four</th>
<!-- Any number of columns follow... -->
</thead>
<tbody>
<!-- content... -->
</tbody>
</table>
What is the correct way (with CSS) to style the columns so that they fit like this:
col.one has to stretch as much as possible, but not more than 35%.
all other columns can be as thin as possible, but without wrapping the content.
Example:
Good:
<-------------| Max 35% |-------------->
__________________________________________________________________
| One | Two | Three | Four |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Bad:
__________________________________________________________________
| | T | T | F |
| | w | h | o |
| One | o | r | u |
| | | e | r |
| | | e | |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Thanks
For your first request, as #KheemaPandey said, you should use max-width:35% in CSS.
As per your second request, format the columns that you don't want to wrap with white-space: nowrap;. That should do it.
I've a bit of a problem. I've table data in such a way that you have a table, divided in to column groups, that's then divided in to columns. For the sake of argument, let's say like this:
<person>
<details>
<age>26</age>
<birthplace>Amsterdam</birthplace>
</details>
<appearance>
<hair>Brown</hair>
<eyes>Grey</eyes>
</appearance>
<clothes>
<trousers>Black</trousers>
<shirt>Red</shirt>
</clothes>
</person>
From this, my thinking is that these groups could/should perhaps be represented like this:
+-------------------------------------------------------+
| Layout |
| +---------------+ +---------------+ +---------------+ |
| | Composite | | Composite | | Composite | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| | |Item| |Item| | | |Item| |Item| | | |Item| |Item| | |
| | +----+ +----+ | | +----+ +----+ | | +----+ +----+ | |
| +---------------+ +---------------+ +---------------+ |
+-------------------------------------------------------+
Since the table groups should be able to be independently hidden from view, or have other actions performed on them (as a group).
However, this is tabular data and so, semantically, should be displayed like this (with appropriate table & tbody tags):
<table>
<colgroup>
<col>...</col>
...
</colgroup>
<thead>
<tr>
<th>Age</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>26</td>
<td>Amsterdam</td>
<td>Brown</td>
<td>Grey</td>
<td>Black</td>
<td>Red</td>
</tr>
...
</tbody>
</table>
Any ideas on how to implement this? I guess (may be wrong) that I'll have to extend/hack about with Marionette somehow to get it to produce the desired output - I just haven't a clue what that might happen to be! Or indeed if my brain is thinking the wrong stuff to begin with ... :)
If I'm understanding your question correctly, you should be able to use one layout to display 3 composite views.
To avoid "div soup" in your composite view, simply use the tagName property. You can see examples of that here:
http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
http://davidsulc.com/blog/2013/02/03/tutorial-nested-views-using-backbone-marionettes-compositeview/
I've found a solution to this problem on this very site - see Turning off div wrap for Backbone.Marionette.ItemView (adapted for a collectionView, since to me it makes more logical sense). However, IMO this solution should be only used in exceptional circumstances; generally the way Backbone/Marionette handle views is very sensible, and by and large markup should be written to fit in with that rather than the other way round! :)
This is a side note -
If you want to add height: 100% to the wrapping div so that % height values in child elements would work.
Change the render function in backbone.marionette.js under
Marionette.ItemView= Marionette.ItemView.extend({ ... and
Marionette.CompositeView= Marionette.CollectionView.extend({ ... like so:
render: function() {
.......
// ADD THIS BEFORE THE RETURN STATEMENT
$(this.el).css("height", "100%");
return this;
},
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.