Html Flexbox作为Firefox和Opera上表格的替代品

我们都知道Firefox和Opera在处理表格方面很差劲。通过下面的代码和css，我的表格在Chrome和Safari上可以完美地显示。在Firefox和Opera上，显示项目的行中的填充几乎增加了三倍，导致4个半项目溢出。委婉地说，这张桌子看起来糟透了

HTML:

所以，我放下了桌子标签：

<div class= 'span10'>
<!--  <div class= 'span2'>  -->                   
    <div class='photos'>
        <!-- <table cellspacing="0"> -->
        <% @books.in_groups_of(9, false).shuffle.each do|books| %>                          
              <!--  <tr> -->
                 <% for book in books.shuffle %>
                    <!-- <td> -->
                    <%= link_to image_tag(book.image_url, :class => 'book') %>
                         <% if current_user.try(:admin?)  %>                                                 
                         <%= link_to 'Edit', edit_book_path(book) %> |
                         <%= link_to 'Destroy', video, method: :delete, data: {   confirm: 'Are you sure?' } %>
                         <%= link_to 'New Book', new_book_path %>
                         <% else %>
                         <% end %>
                        <div class='hrline'><hr /></div>
                    <!--  </td> -->
                        <% end %> 
               <!--  </tr> -->
         <% end %> 
    <!--</table>-->             
 </div>   
<!--</div>-->
</div>

我很兴奋，从我读到的，这将结束噩梦。但是，当我刷新页面时，这些项目（本例中为书籍）在所有4个浏览器上每行显示一个项目

---

注意。我使用无序列表作为上述代码的变体，但这似乎没有帮助。

我终于弄清了这个问题的根源：我一直认为是css

因此，我保留了我的桌子，在浏览器gem的帮助下，我能够为Firefox和Opera提供某种css，为Chrome和Safari提供另一种css，这很好地解决了这个问题。我是这样做的：

<% if browser.firefox? || browser.opera? %>
     <div class='fire-photos'> //css for firefox and opera
<% else %> 
     <div class='photos'> //css for chrome and safari
<% end %>
        <table>
              <tr>
                  <td>
                  </td>
              </tr>
        </table>
    </div>

//firefox和opera的css
//chrome和safari的css

模板代码无效，请提供生成的HTML。Opera和Firefox在显示表格方面没有问题。Flexbox也不是表的替代品：表用于表格数据。我提交的代码是嵌入Ruby的html代码。我会提交整个页面的源代码，但Stackoverflow只允许您在发表评论时使用几个字符。生成的代码没有什么不同：它只是显示了一系列的项目行。好的，您可以用生成的代码附加您的问题。编辑和编辑每一个标签是一件痛苦的事情，尤其是当你认为你所要做的只是查看源代码并粘贴HTML时。你可以在几个小时前得到答案。生成的代码甚至更长：我提交的是实际文件中包含的代码以及与问题相关的部分。我不知道任何人不看代码怎么能调试。老实说，问题不在html代码中，html代码非常简单（），而在样式中。两只或两只以上的眼睛比一只好。

<div class= 'span10'>
<!--  <div class= 'span2'>  -->                   
    <div class='photos'>
        <!-- <table cellspacing="0"> -->
        <% @books.in_groups_of(9, false).shuffle.each do|books| %>                          
              <!--  <tr> -->
                 <% for book in books.shuffle %>
                    <!-- <td> -->
                    <%= link_to image_tag(book.image_url, :class => 'book') %>
                         <% if current_user.try(:admin?)  %>                                                 
                         <%= link_to 'Edit', edit_book_path(book) %> |
                         <%= link_to 'Destroy', video, method: :delete, data: {   confirm: 'Are you sure?' } %>
                         <%= link_to 'New Book', new_book_path %>
                         <% else %>
                         <% end %>
                        <div class='hrline'><hr /></div>
                    <!--  </td> -->
                        <% end %> 
               <!--  </tr> -->
         <% end %> 
    <!--</table>-->             
 </div>   
<!--</div>-->
</div>

.photos  {
  width: 1600px;
  margin-left: 5px;
  padding: 5px;
  position: relative;
  border-collapse:collapse;
  display: -webkit-flex;
  -webkit-flex-flow: column;
  -webkit-flex-align-items: baseline;
  -webkit-flex-direction: row;
  display: flex;
  flex-flow: column;
  lex-align-items: baseline;
  flex-pack: distribute;
  flex-direction: row;
}

<% if browser.firefox? || browser.opera? %>
     <div class='fire-photos'> //css for firefox and opera
<% else %> 
     <div class='photos'> //css for chrome and safari
<% end %>
        <table>
              <tr>
                  <td>
                  </td>
              </tr>
        </table>
    </div>