Question

我有一张显示图片和名称以及更多详细信息的地方卡，我在此框中放置了一个表格，其中显示的内容很少，但是我无法解决的问题很少

1）如果我在表格中放入更多数据，那么它就会超出方框（如下图所示）。我应该如何放置盒子以使其保持在盒子内。如果文本很长，它应该转移到下一行，但应该保持在同一列，不应低于技能，即应该从PHP下面开始

2）我想将css应用于第一列，例如在这种情况下我希望将css应用于exp，评级，位置，域和技能

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="box">
        <div class="box-icon">
             <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
        </div>
        <div class="info">
            <h4 class="text-center">John Doe</h4>
            <table class="table table-striped">
                <tbody>
                    <tr>
                        <td>Exp</td>
                        <td>1 Years</td>
                    </tr>
                    <tr>
                        <td>Rating</td>
                        <td>*****</td>
                    </tr>
                    <tr>
                        <td>Location</td>
                        <td>UK</td>
                    </tr>
                    <tr>
                        <td>Domain</td>
                        <td>IT</td>
                    </tr>
                    <tr>
                        <td>Skills</td>
                        <td>PHP,javascript,jquery,html,css</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Css代码

.box {
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    padding: 10px 25px;
    text-align: right;
    display: block;
    margin-top: 60px;
}
.box-icon {
    background-color: #57a544;
    border-radius: 50%;
    display: table;
    height: 100px;
    margin: 0 auto;
    width: 100px;
    margin-top: -61px;
}

.box-icon img
{
    border-radius: 50%;
    height: 100px;
    width: 100px;
}
.box-icon span {
    color: #fff;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.info .table
{
    text-align: initial;
}

Answer 1

试试这个

.table.table-striped{table-layout:fixed;}

Answer 2

更改此.table { /* width: 100%; */ /* max-width: 100%; */ margin-bottom: 20px; }

我会把它装进盒子里

或者您可以使用

<div class="table-responsive"> <table class="table"> ... </table> </div> 它会使额外的表格宽度滚动

Answer 3

尝试第二个问题：

代码：

<table>
 <tr>
 <td class="td1">Exp</td>
<td class="td2">1 Years</td>
</tr>
<tr>
<td Class="td1">Rating</td>
<td class="td2">****</td>
 </tr>
<tr>
<td Class="td1">Location</td>
<td class="td2">Bangalore</td>
 </tr>
<tr>
<td class="td1">Domain</td>
<td class="td2">Php</td>
 </tr>

CSS：

.td1{
background-color:teal;

}

 .td2{
  background-color:yellow;
}

Answer 4

Plz看看

Matched 'a b'

if (preg_match('~^[^\s#+&\'"\\\\]+(?:\s[^\s#+&\'"\\\\]+)*$~', "")) {
    echo "Matched ''\n";
}
if (preg_match('~^[^\s#+&\'"\\\\]+(?:\s[^\s#+&\'"\\\\]+)*$~', " ")) {
    echo "Matched ' '\n";
}
if (preg_match('~^[^\s#+&\'"\\\\]+(?:\s[^\s#+&\'"\\\\]+)*$~', " a")) {
    echo "Matched ' a'\n";
}
if (preg_match('~^[^\s#+&\'"\\\\]+(?:\s[^\s#+&\'"\\\\]+)*$~', "a b")) {
    echo "Matched 'a b'\n";
}
if (preg_match('~^[^\s#+&\'"\\\\]+(?:\s[^\s#+&\'"\\\\]+)*$~', "a  b")) {
    echo "Matched 'a  b'\n";
}

无法在桌子内放置桌子

4 个答案: