如何自动对齐井内的表格

Question

我有以下模板（使用bootstrap和自定义css）

    <div class="well well1">

            {% for k, m in items %}
                <span>
                    <button class="btn btn-default drop">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" ng-model="mysite['{{ k }}']"> <b>{{ k }}</b>
                            </label>
                        </div>
                    </button>
                </span>
                <br><br>

            <table ng-show="mysite['{{ k }}']" class="table table-bordered tbl" ng-cloak>
....

CSS

.well1 {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: white;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    max-width: 100%;
}

table的大小会增加，因为th实际上是一个变量。如果th的值较高，则table将与其well取消对齐。有什么办法可以解决吗？意味着无论我的table有多长，它总是在well之下，也是well内很长桌子的滚动条？任何想法的人？