发表新帖
发表新帖

Force html table into single stacked column using only css and no javascript

前端 未结
关注
8 1100
时光取名叫无心
时光取名叫无心 2021-01-02 10:47

I\'m creating a html template that wraps a table that is used to lay out a form. I have full control over the html that wraps the table not the table itself. The table is in

相关标签:
8条回答
  • 暗喜
    2021-01-02 10:49

        Simply; No. You cannot turn a row turn a 2-column table into a 1-column table without some JavaScript.
        Either tell the coders of the table to create the table that way, or simply use JavaScript to re-structure the table.

    0 讨论(0)
  • 面向向阳花
    2021-01-02 10:49

    Actually, it's incredibly easy (and can be done with 2 lines of css): Make your td width 100% and set overflow:auto. Your second column will automatically wrap around.

    0 讨论(0)
  • 被撕碎了的回忆
    2021-01-02 10:53

    Nope, this is not reasonably possible without changing the markup. Tables in HTML are structured as rows, not as columns. In the example you give you're re-ordering the content:

    Original order:
    Column 1 -> Column 2 -> this-is-col-1 -> this-is-col-2

    New ordering:
    Column 1 -> this-is-col-1 -> Column 2 -> this-is-col-2

    Why did I say "not reasonably possible"? Well, with absolute positioning and similar techniques you may be able to hack the layout you want together - but there's a world of CSS-hurt waiting as I don't expect that approach to play nice in a real page.

    Additional note: To add to the "re-ordering" problem, something that may be a little easier to accomplish would be this layout, where the order stays the same:

    ----------------------------
|Column 1                   |
-----------------------------
|Column 2                   |
-----------------------------
|this is column 1           |
-----------------------------
| this is column 2          |
-----------------------------

    But that's obviously not what you want.

    0 讨论(0)
  • 孤街浪徒
    2021-01-02 10:53

    You can achieve something similar by using display:block;.

    See this fiddle: http://jsfiddle.net/R53KH/

    0 讨论(0)
  • 悲哀的现实
    2021-01-02 10:59

    Try adding this to you CSS:

    td {
  display: table-row;
}

    Cheers.

    0 讨论(0)
  • 庸人自扰
    2021-01-02 11:04

    Still having issues and in Chrome?

    For those still having issues (like me) check you have <!DOCTYPE html> in the head of your document. If you don't Chrome seems to totally ignore anything you add and keep display: table-cell.

    0 讨论(0)
 看不清?
提交回复
热议问题