我们怎样才能使bootstrap行/列看起来像一个表？

My #1 try fails because of padding in col's.

我的#1尝试失败,因为在col中填充。

My #2 try also because I must be doing something stupid.

我的#2尝试也是因为我必须做一些愚蠢的事情。

Here's desired result:

这是理想的结果:

Could someone help me? Please avoid rewriting bootstrap rules if possible.

有人能帮帮我吗?如果可能,请避免重写引导规则。

13 个解决方案

#1

Basic principle of Table -> row / column is that, in a particular row, columns should be of equal height whatever is the content.

表 - >行/列的基本原则是,在特定行中,无论内容是什么,列都应该具有相同的高度。

You can make table -> row/columns structure using bootstrap grid but there will be a problem of equal heights column.

您可以使用引导网格制作表格 - >行/列结构,但会出现高度相等列的问题。

So, for this purpose i.e. for equal columns, you can use flexbox property. (it doesn't work in ie9 and less so be sure about its use.)

因此,为此目的,即对于相等的列,您可以使用flexbox属性。 (它在ie9中不起作用,所以请确保它的使用。)

Check this fiddle here

在这里查看这个小提琴

Just add following simple CSS to a parent container (for complete demo checkout above fiddle),

只需将以下简单的CSS添加到父容器中(对于小提琴上方的完整演示结帐),

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

Here is the reference

这是参考

#2

You can use table-responsive :

您可以使用表格响应:

<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="table-responsive">

    <table class="table table-bordered table-striped">
        <thead>
            <tr> <td></td> <th>Chrome</th> <th>Firefox</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Android</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted" rowspan="3" style="vertical-align:middle">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-muted">N/A</td>
            </tr>
            <tr>
                <th scope="row">iOS</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-muted">N/A</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Mac OS X</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
            </tr>
            <tr>
                <th scope="row">Windows</th>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-success"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span> Supported</td>
                <td class="text-danger"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Not Supported</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

#3

Have you tried using a Bootstrap table? If not, I would recommend you do that and set the <td>s with the width you want. For example:

您是否尝试过使用Bootstrap表?如果没有,我建议你这样做,并用你想要的宽度设置。例如:

<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>

Source

#4

Like everybody said before, you can use the table tags. But if you still want to use divs, you can use Bootstrap's grid class to assure your table still appear well on every screen size. I edited your code like this:

像之前所说的人一样,你可以使用表格标签。但是如果你仍然想使用div,你可以使用Bootstrap的网格类来确保你的桌子在每个屏幕尺寸上都能很好地显示。我编辑了你的代码:

<style>
    .table {
        width: auto;
        margin: 0 auto;
        border: 1px solid red;
    }
    .table .row {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .table .row div {
        border: 1px solid red;
    }
</style>

<div class="table">

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image1.jpg" alt="image1">
            Some content here. Hello *!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image2.jpg" alt="image2">
            Some content here. Hello *!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4">
            <img src="image3.jpg" alt="image3">
            Some content here. Hello *!
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8">
            Some content here. Hello world!
        </div>
    </div>

</div>

As you can see, I used display: flex; and flex-wrap: wrap; on the .row to make the cells the same height.

如你所见,我用display:flex;和flex-wrap:wrap;在.row上使细胞高度相同。

Good luck!

#5

I made some changes on your code. but I don't know if it's excately what you expect:

我对你的代码做了一些修改。但我不知道你的期望是否真的如此:

HTML:

<div class="container">
  <div class="row">
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
    <div class="image-column col-md-4">
      <img src="" alt="image" />
    </div>
  </div>

  <div class="row">
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
    <div class="content-column col-md-4">
      Some content here. Hello world!
    </div>
  </div>
</div>

CSS:

/* CSS used here will be applied after bootstrap.css */

.container {
    text-align: center;
}
.container .row {
    display: flex;
}
.container .row:nth-child(even) {
    background: gainsboro;
}
.container .content-column, .container .image-column {
   border: 1px solid grey;
}
.container .row:not(:first-child) .content-column, .container .row:not(:first-child) .image-column {
    border-top: 0px;
}
.container .content-column:not(:first-child), .container .image-column:not(:first-child) {
   border-left: 0px;
}
.image-column {
    padding: 5px;
}
.content-column {
   border: 1px solid grey;
   border-top: 0px;
  font-size: 1.3em;
}
.content-column:not(:first-child) {
   border-left: 0px;
}

Result:

Check this in action: http://www.bootply.com/1MaNWk0ybV

请查看此操作:http://www.bootply.com/1MaNWk0ybV

#6

you can use row display:table colum display:table-cell

你可以使用行显示:table colum display:table-cell

#7

Here is the code for your problem may be this can help you.

这是您的问题的代码可能这可以帮助您。

Check this fiddle link JSFiddle

检查这个小提琴链接JSFiddle

HTML CODE

<div style="width: 900px; margin: 0 auto;display:table-cell; border: 1px solid red;">
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello *!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello *!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
  <div class="row">
    <div class="col-md-4 tableColumnDiv">
        <img src="" alt="image"> Some content here. Hello *!
    </div>
    <div class="col-md-8 tableColumnDiv">
        Some content here. Hello world!
    </div>
  </div>
</div>

CSS CODE

.image-column {
   border: 1px solid black;
}
.tableColumnDiv{
  display:table-cell;
  border: 1px solid black;
}

#8

Please see the working DEMO..This is exactly what you need.... Hope it help you a bit.

请看工作演示......这正是你需要的......希望它对你有所帮助。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" >
  <div class="row" style="border: 1px solid grey;">
    <div class="col-md-4  col-sm-4  col-xs-4 text-center" style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
     <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
    <div class="col-md-4 col-sm-4  col-xs-4  text-center"  style="border-right:1px solid grey">
      <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" width="20" height="20" class="img-circle"/>
    </div>
  </div>
 <div class="row" style="border: 1px solid grey;background-color:#f3f3f3">
    <div class="col-md-4 col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
    <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
       <strong>Yes</strong>
    </div>
    <div class="col-md-4  col-sm-4  col-xs-4 text-center"  style="border-right:1px solid grey">
         <strong>Yes</strong>
    </div>
  </div>
</div>

#9

Aigzy and Waldir are both providing good solutions, but they are making the same mistake. The solutions they propose are not responsive. On mobile the 'table' will no longer be readable. To avoid this you need to nest the columns one level more, like this:

Aigzy和Waldir都提供了很好的解决方案,但他们犯了同样的错误。他们提出的解决方案没有响应。在移动设备上,“桌子”将不再可读。为避免这种情况,您需要将列嵌套一层,如下所示:

<div class="row">
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
  <div class="col-md-4">
    <div class="col-md-12"> (image) </div>
    <div class="col-md-12"> (text) </div>
  </div>
</div>

http://www.bootply.com/jYSePqMDGi

#10

Here is the working code: Bootply link

这是工作代码:Bootply链接

2 step process:

2步流程:

Add an extra class(.row-table) for .row and assign the following css properties.

为.row添加一个额外的类(.row-table)并分配以下css属性。
```
.row-table{ display:flex;  
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;}
```

Add an extra class .table-cell to our col-x-x and assign the following css properties.

在我们的col-x-x中添加一个额外的类.table-cell并分配以下css属性。

.table-cell{ border-color: black; border-style:solid; border-width:1px 0 0 1px;}
.row-table .table-cell:last-child{ border-right-width:1px;}
.row-table:last-child .table-cell{ border-bottom-width:1px;}

Note: column width depends upon the column grid classes you use.

注意:列宽取决于您使用的列网格类。

#11

Try this and read the comments in CSS area: http://www.bootply.com/byopZWzR2K

试试这个并阅读CSS领域的评论:http://www.bootply.com/byopZWzR2K

This code will solve the vertical alignment of any cell.

此代码将解决任何单元格的垂直对齐问题。

Here is the same code also:

这是相同的代码:

CSS

/* This play-area class is just for testing and aligned the width of this table */
.play-area{width:400px;margin:19px auto}
.play-area img{height:32px;}

.make-this-table{border:1px solid #d7d7d7;overflow:hidden;} /* this to give our table outer border */
.make-this-table .row{border-top:1px solid #d7d7d7;background:#e7e7e7} /* This simple to add separator line between each row also to give each row background color */
.make-this-table .row:nth-child(1){border:none;background:#c5c5c5} /* This to ignore the separator for the first row since it will be the head of this table. You can remove this line to have this table without head */


/* This code to make rows in alternative background colors */
.make-this-table .row:nth-child(even) {background:#fff}


/* This to make the text vertical align in middle if the next column in the same row has more than one line while the first column just one line like the second row in this table .. You can remove this line if you like to make the alignment at the top of the cell. */
.make-this-table .row{align-items: center;display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

HTML

<div class="play-area">
<div class="make-this-table">

  <div class="row">
    <div class="col-md-4 col-xs-4">
        <img src="http://www.chromium.org/_/rsrc/1438811752264/chromium-projects/logo_chrome_color_1x_web_32dp.png" alt="" style="">
    </div>
    <div class="col-md-8 col-xs-8">
        <img src="https://www.mozilla.org/media/img/styleguide/identity/firefox/guidelines-logo.7ea045a4e288.png" alt="" style="width:32px;">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Chrome Browser.
    </div>
    <div class="col-md-8 col-xs-8">
        Firefox Browser.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Updated.
    </div>
    <div class="col-md-8 col-xs-8">
      Not Updated<br>New line.<br>Now firefox is updated.
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Try new line.
    </div>
    <div class="col-md-8 col-xs-8">
      Adding image to break line: <img src="http://www.w3schools.com/images/compatible_edge.gif" alt="">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-xs-4">
        Keep trying ..
    </div>
    <div class="col-md-8 col-xs-8">
        Also keep trying Ya labba ..
    </div>
  </div>


</div>
</div>

#12

How about following aproach:

如何遵循以下方式:

bootply example

It uses CSS to set display, so the columns are the same height. Found the CSS at following link:

它使用CSS来设置显示,因此列的高度相同。在以下链接找到CSS:

equal height columns example

等高柱示例

#13

In your second example i changed the image-column and content-column, its working.. Try this it may help you...

在你的第二个例子中,我更改了image-column和content-column,它正在工作..尝试这个可能对你有帮助...

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style>
    /* CSS used here will be applied after bootstrap.css */
    
    .row {
        display: flex;
    }
    
    .image-column {
        border: 1px solid black;
    }
    
    .content-column {
        border: 1px solid black;
    }
</style>
<div style="width: 90%; margin: 0 auto;">

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>

        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
        </div>
        <div class="col-md-8 content-column">
            Some content here. Hello world!
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 image-column">
            <img src="http://icons.iconarchive.com/icons/google/chrome/72/Google-Chrome-icon.png" alt="image"> Some content here.
            </div>
            <div class="col-md-8 content-column">
                Some content here. Hello world!
            </div>
        </div>

    </div>

#1