如何修复bootstrap 3中的btn宽度？

Question

我只是尝试确保无论表格中的文字长度如何，.btn都应使text fit和Long event text that absolutely does not fit(shown on hover)相同{{1}在不影响当天之外的任何其他文本的情况下。例如，不是因为width在第2天有任何长度，它并不意味着第1天或第5天应Long event text that absolutely does not fit(shown on hover)。

注意：当我提到overflow时，我在谈论颜色。颜色应该包裹文本。不增加其他文本的宽度，但只增加那天内的文本。

＆＃13;

＆＃13;

.btn width

＆＃13;

.inside-date, .td-top-text {
    text-align: right;
    
}
.inside-event {
    text-align: left;
    
}
.inside-event.btn {
    text-align: left;
    width: 100%;
    padding: 0px;
    line-height: 1.2em;
    color: black;
}
td.td-top-text {
    width:14.28571428571429%; /* 100% divided by 7 */
    position:relative;
}
td.td-top-text:before {
    content:'';
    display:block;
    margin-top:100%;
    position: relative;
}
td.td-top-text .inside {
    position:absolute;
    top:2px;
    bottom:2px;
    left:2px;
    right:2px;
    overflow-y: auto;
    overflow-x: auto;
}
    

＆＃13;

＆＃13;

＆＃13;

修改

所以它应该是这样的，但不会影响测试所在的<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <table class="table table-bordered"> <thead> <tr> <th>Sun</th> <th>Mon</th> <th>Tue</th> <th>Wed</th> <th>Thu</th> <th>Fri</th> <th>Sat</th> </tr> </thead> <tbody> <tr> <td class=" td-top-text"></td> <td class=" td-top-text"></td> <td class=" td-top-text"></td> <td class=" td-top-text"></td> <td class=" td-top-text"> <div class="inside"> <div class="inside-date">1</div> <div class="inside-event btn btn-primary" title="Event text 1(shown on hover)">Event text 1</div> <div class="inside-event btn btn-warning" title="Event text 2(shown on hover)">Event text 2</div> <div class="inside-event btn btn-success" title="Event text 3(shown on hover)">Event text 3</div> <div class="inside-event btn btn-primary" title="Event text 4(shown on hover)">Event text 4</div> <div class="inside-event btn btn-warning" title="Event text 5(shown on hover)">Event text 5</div> <div class="inside-event btn btn-success" title="Event text 6(shown on hover)">Event text 6</div> <div class="inside-event btn btn-primary" title="Event text 7(shown on hover)">Event text 7</div> <div class="inside-event btn btn-warning" title="Event text 8(shown on hover)">Event text 8</div> <div class="inside-event btn btn-success" title="Event text 9(shown on hover)">Event text 9</div> </div> </td> <td class=" td-top-text"> <div class="inside"> <div class="inside-date">2</div> <div class="inside-event btn btn-primary" title="Text fits(shown on hover)">Text fits</div> <div class="inside-event btn btn-warning btn-block" title="Long event text that absolutely does not fit(shown on hover)">Long event text that absolutely does not fit</div> </div> </td> <td class=" td-top-text"> <div class="inside">3</div> </td> </tr> <tr> <td class="td-top-text"> <div class="inside">4</div> </td> <td class="td-top-text"> <div class="inside">5</div> </td> <td class="td-top-text"> <div class="inside">6</div> </td> <td class="td-top-text"> <div class="inside">7</div> </td> <td class="td-top-text"> <div class="inside">8</div> </td> <td class="td-top-text"> <div class="inside">9</div> </td> <td class="td-top-text"> <div class="inside">10</div> </td> </tr> </tbody> </table> 那边。

在此图片中，表格受到文本侧面的影响。

修改

如果我改变了我的：

box

要

.inside-event.btn {
   text-align: left;
 padding: 0px;
 line-height: 1.2em;
}

我仍然明白这一点：

颜色不包含文字。

Answer 1

我创建了一个新的答案，这个，回答你的问题。

我使用<div class="inside-content">新display:table; width:100%，内部事件显示：阻止，所有工作：）

＆＃13;

＆＃13;

.inside-date, .td-top-text {
    text-align: right;
    
}

.inside-content {
    display:table;
    min-width:100%;
 }
.inside-event {
    text-align: left;
    
}
.inside-event.btn {
    text-align: left;
    display:block;
    width:auto;
    padding: 0px;
    line-height: 1.2em;
    color: black;
}
td.td-top-text {
    width:14.28571428571429%; /* 100% divided by 7 */
    position:relative;
}
td.td-top-text:before {
    content:'';
    display:block;
    margin-top:100%;
    position: relative;
}
td.td-top-text .inside {
    position:absolute;
    top:2px;
    bottom:2px;
    left:2px;
    right:2px;
    overflow-y: auto;
    overflow-x: auto;
}
    

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
 <table class="table table-bordered">
    <thead>
    <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>Tue</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class=" td-top-text"></td>
        <td class=" td-top-text"></td>
        <td class=" td-top-text"></td>
        <td class=" td-top-text"></td>
        <td class=" td-top-text">
            <div class="inside">
                <div class="inside-content">
                    <div class="inside-date">1</div>
                    <div class="inside-event btn btn-primary" title="Event text 1(shown on hover)">Event text 1</div>
                    <div class="inside-event btn btn-warning" title="Event text 2(shown on hover)">Event text 2</div>
                    <div class="inside-event btn btn-success" title="Event text 3(shown on hover)">Event text 3</div>
                    <div class="inside-event btn btn-primary" title="Event text 4(shown on hover)">Event text 4</div>
                    <div class="inside-event btn btn-warning" title="Event text 5(shown on hover)">Event text 5</div>
                    <div class="inside-event btn btn-success" title="Event text 6(shown on hover)">Event text 6</div>
                    <div class="inside-event btn btn-primary" title="Event text 7(shown on hover)">Event text 7</div>
                    <div class="inside-event btn btn-warning" title="Event text 8(shown on hover)">Event text 8</div>
                    <div class="inside-event btn btn-success" title="Event text 9(shown on hover)">Event text 9</div>
                </div>
            </div>
        </td>
        <td class=" td-top-text">
            <div class="inside">
              <div class="inside-content">
                <div class="inside-date">2</div>
                <div class="inside-event btn btn-primary" title="Text fits(shown on hover)">Text fits</div>
                <div class="inside-event btn btn-warning btn-block" title="Long event text that absolutely does not fit(shown on hover)">Long event text that absolutely does not fit</div>
            </div>
</div>
        </td>
        <td class=" td-top-text">
            <div class="inside">3</div>
        </td>
    </tr>
    <tr>
        <td class="td-top-text">
            <div class="inside">4</div>
        </td>
        <td class="td-top-text">
            <div class="inside">5</div>
        </td>
        <td class="td-top-text">
            <div class="inside">6</div>
        </td>
        <td class="td-top-text">
            <div class="inside">7</div>
        </td>
        <td class="td-top-text">
            <div class="inside">8</div>
        </td>
        <td class="td-top-text">
            <div class="inside">9</div>
        </td>
        <td class="td-top-text">
            <div class="inside">10</div>
        </td>
    </tr>
    </tbody>
</table>
        

＆＃13;

＆＃13;

＆＃13;