All geek questions in one place

Is there a CSS alternative for horizontal table layouts without flaws?

My boss wants me to stop using CSS layouts and start using table layouts. The main factor in this is the desired behavior of the tables in horizontally arranged, liquid layouts. See this example:

If you reduce the width of the HTML panel, you will see that the table (first) has several convenient qualities:

  • Automatically finds a good place to separate two cells, giving the cell more content with a larger percentage of the available width.
  • Fills all available width 100%.
  • When deciding which of the cells to wrap, he does this most effectively in terms of vertical space.
  • Keeps two cells aligned horizontally no matter what.

Example A does not have quality 1 . (You must update the ratio manually if the content is resized.)

Example B does not have quality 1 or 3 . (A static 50% is less than ideal, but it can work. However, it splits into 3 rows, while the table remains only 2 rows.)

Example C does not have a quality of 2 or 4 . (I see ways to fake quality 2 with this, but clearing to the next line is completely aborting the transaction.)

Example D does not have quality 1 or 4 . (Technically, it has 1, but the huge gap between them is impractical. In addition, swimming to the left and right in some browsers does not work).

Since the data is not semantically tabular, I really want to avoid using tables. But my boss pays me, so I need to go with what he says or find the best solution. Is there a way to do this with semantic markup and CSS?

+6
source share
3 answers

Updated: for all browsers> ie7 you can use display: table, table-row, table-cell . jQuery code will target ie7 and then replace the div with the corresponding table elements.

If this is the only problem you have encountered so far, you should not install any deadlock system to fix this. This is an unnecessary and waste of time.

http://jsfiddle.net/CoryDanielson/yuNTX/

sample html

 <div class="table width100pct"> <!-- .table should have NO style. just 'display: table' --> <div class="tr"> <div class="td"></div> <div class="td"></div> </div> </div>​ <!-- class="table, tr, td" is ONLY for changing display: table, table-row and table-cell. you SHOULD NOT include any styles inside of these CSS selectors. These classes will be removed when the divs are transformed into <table>, <tr>, <td> --> //conditionally load the javascript patches for ie7 <!--[if IE 7]><script src="/js/IE7fixes.js"></script><![endif]-->

IE7fixes.js

 $(document).ready(function(){ //comment out the if statement to check functionality without ie7 if ($.browser.msie && $.browser.version == 7) { $('html').addClass('ie7') //<html class="ie7">.. like modernizr var elem, elemClass $('div.table').each(function(i, elem) { elem = $(elem) elemClass = elem.removeClass('table').attr('class') || '' elem.wrapInner("<table class='" + elemClass + "' />").children().unwrap() }) $('div.tr').each(function(i, elem) { elem = $(elem) elemClass = elem.removeClass('tr').attr('class') || '' elem.wrapInner("<tr class='" + elemClass + "' />").children().unwrap() }) $('div.td').each(function(i, elem) { elem = $(elem) elemClass = elem.removeClass('td').attr('class') || '' elem.wrapInner("<td class='" + elemClass + "' />").children().unwrap() }) } });​

You need to structure your CSS similar to mine

css required

 table, div.table { width: 100%; } tr, div.tr { vertical-align: top; } /* the following 3 classes will be dropped when transformed in ie7 but that won't matter because they'll fall back to <table><td><tr> */ div.table { display: table; } /* NO STYLES HERE */ div.tr { display: table-row; } /* NO STYLES HERE */ div.td { display: table-cell; } /* NO STYLES HERE */
+5
source

I have not used tables to lay out the non-tabular content of a website for many years, so I might have missed a few things here, but I have some alternatives and ideas.

Distract him from some: it seems that the main problem is that your boss wants you to use a web development technique that is faster than the one you are currently using, allows you to achieve the same layout, and it is not related to semantic markup.

I think that to achieve the same goals, you can use CSS or a platform for building sites, such as Twitter Bootstrap or 960gs instead of a tabular layout (Note: 960gs is included in Bootstrap). These structures have some non-semantic markup, such as a div, to contain lines and spaces for setting width and offset elements, but better than using a table in terms of availability and amount of non-semantic markup.

You can further mitigate this by specifying your element identifiers and additional classes and styling them, and there is less non-semantic markup than if you were using a table-based layout.

Based on my interpretation of the root problem, a structure like any of these also gives you elements with a pre-styled style and a way to nicely highlight elements that will save your time in the overall design -> code -> loop revision and none of this contradicts web best practices -development.

Some resources for Twitter Bootstrap:
http://twitter.github.com/bootstrap/ - Download and good documentation
http://twitter.github.com/bootstrap/scaffolding.html - examples of code that you would use in Bootstrap instead of a table layout

960gs (960px wide mesh):
960.gs/- Homepage
https://speakerdeck.com/u/nathansmith/p/960-grid-system - the final tutorial on 960gs and the reasons for using it
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/ - A tutorial that I first used to learn about mesh systems in web design

If my initial guess is wrong, sorry! Also, if you have any questions or want more information, let me know.

+1
source

Have you provided css frames like foundation ? It hits with td inside td in the table inside td in the table ... (:

0
source

Source: https://habr.com/ru/post/920174/

More articles:


All Articles