表中的div <div>元素超出了单元格<td>的边距

Question

我遇到了HTML和CSS的奇怪行为，这通常是我所不希望的。有人能够解释这一点，并可能提供解决该问题的想法。

表单元格中div元素的大小不受其容器的限制。

for key, value in json_object['data']['9'].items():
    # We can use .keys() here since we only need the IDs from csevents
    csevent_keys = list(value['csevents'].keys())
    print(csevent_keys)

# Output
['2807', '2810']
['3601']

从下面的图片可以看出，div内容的灰色背景超出了单元容器的红色边框（已通过Firefox和Chrome测试），这是我所料不到的。因此，如果您尝试开发网页的表格布局，则会遇到很大的困难。

任何想法如何解决？

https://jsfiddle.net/yomf75np/

Answer 1

最简单的解决方案是：

更改：

    #text_status_line {
        margin: 10px 10px 10px 10px;
        padding: 10px 10px 10px 10px;
        width: 100%;
        background-color: #ddd;
    }

收件人：

    #text_status_line {
        margin: 10px 10px 10px 10px;
        padding: 10px 10px 10px 10px;
        width: inherit;
        background-color: #ddd;
    }

这将使其继承宽度！

Answer 2

完全删除#text_status_line中的宽度。

table{
  width: 80%;
}
    #text_status_line{
        margin: 10px 10px 10px 10px;
        padding: 10px 10px 10px 10px;
        background-color: #ddd;
    }