I want to switch between vertical and horizontal table layout for same data.
Although it is possible to do it by making applying the same CSS for the first column for the vertical layout as the css applied for the header row for the Horizontal layout.
Is there is any way where we can make the webpage render the way we like it (Horizontal/Vertical) .
P.S. I could not add any Images. Apologies for that.
Are you saying you want to switch rows and columns effectively?
You can't do that with tables because A). rows and columns have specific semantics and B). the way this is structured in HTML markup groups cells in row sets, not in table sets with indices you could apply a matrix to. Obviously JS can do it if you really must.
If you have single row of cells you could arrange a similar effect with floating <div> tags with a container <div> which changes width (amongst other methods)
Related
I have in my layout a container that has 3 columns and should have many elements.
If all elements have the same height it looks very nice, but if one of them has a different height it will move the entire row instead of just one column.
This is how it looks:
This is how it should look:
How can I do that with bootstrap (v3)?
This is my html
To achive that, if you don't want to have a fixed height in elements, I think you should follow a column based strategy instead of row based one because your cols do not have an equal height, so when floating the break the flux you actually want.
But if you want it to exactly have it like in your design, I suggest using JavaScript.
I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom.
Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed.
I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular divs with their widths set to 100%.
Is there another, perhaps more elegant way to have multiple table captions? Have I made some stupid error in my attempts that's screwing up the layout?
Since you're using CSS for layout (this is not tabular data) then there's no reason to use display:table-caption for the footer. Just make a regular div whose width is set to the same as the table (or fills a container that shrink-wraps the table).
Edit: Here's an updated example: http://jsfiddle.net/fCTpR/1/
I'm working on a MVC application and am having some trouble with the HTML/CSS layout in regards to one of the partials that we have.
The shell of the application contains two columns that expand to be the height of the column with the most content. The left column contains the navigation for the app. The right column is the content area.
I've managed to get this part working appropriately.
Where I'm having issues is that inside for some pages, the content area (right column) needs to be split into two columns. I need both of these columns to dictate the height of the content area, which in turn would dictate the height of the main navigation.
Any input would be incredibly useful! Thanks!
EDIT I got it working, but am not entirely happy with the solution. It requires me to use inline-block, which reads white-space. As a result I used the comment across two lines strategy, but I'm afraid that this would get deleted by somebody while editing/cleaning the project up after the fact.
http://jsfiddle.net/StSmith/RzKJX/
.
I'd imagine that, if you simply added the columns they would automatically fill the space up thus dictating the height of 'content'.
However, if you're floating the columns then the containing element won't pick up their height. In this case you'll need to add, either a cleared element below the columns, or, better add 'clearfix'.
I've found a very strange behavior of a HTML table, where the width allocation of the cells depends on the count of rows. If I have 2 rows the cells have all the same width but when I insert another row the first column expands a little and the second column is narrower than the others.
I have uploaded an example on fiddle.
You can see this behavior when you delete the comment around the third row in the HTML.
Where does this behavior come from?
Table cells will expand to the content unless they have a fixed width. In your example you have table inside tables. Tables tend to have default values such as padding and cell spacing.
To get around this you can use a reset style sheet and modify the CSS of the table and its cells to your choosing
You may need to also perform CSS declarations such as collapsing borders if you really want it to be pixel perfect.
actually columns expands and oontract on the base of contents inside the header or cells
DEMO:http://jsfiddle.net/aPPAL/1/
see the results.
I have a pretty basic question.
I am designing a form using HTML and CSS which should resize to the current page width (e.i. I have to use the relative units for all sizes). The form consists of several text fields all having different width and my client wants that they are arranged in a certain manner (like, for example, ZIP, City and Country to be three different fields in one row with different size proportions etc.).
To correctly layout the input fields along with their captions I put them into a table, using cells with different column span. I align the controls within TD with float:left and use relative width (like width:90%) to make the controls occupy the entire cell.
The problem I am facing is that my controls are aligned to the left and in the cells with different column spans the right margin looks jagged, i.e. all text input fields have slightly different width, because the cell have different widths and the size is proportional to cell width which may vary due to different colspan (see the picture).
How can I make my controls to look aligned on both sides?
P.S.: I am a web developer with some knowledge of HTML and CSS, but I am not at all a designer. Thus, this question might be utterly basic for a designer, but I failed to find a plausible answer with reasonable keyword combinations. If it is a sort of common topic (that I suppose) please just provide me with some clues how to formulate my question in the way to find answers.
i cant tell without your code but it looks like you may be using different font sizing for the input fields which i think could create the effect you are getting.
can you paste the css and html for the three elements you have shown in the pic?