Django:如何更改django-tables2 2中的列宽度

Question

我使用django-tables2的{% render_table table %}来显示一个有表的网页。这个表有多个行和多个列。其中一些列有跨多行的文本。这会创建具有不同高度的行。

我尝试过使用CSS，但它似乎不影响宽度：

.my_col_2 {
    width: 100px;
}

我的views.py：

def index(request):
    table = OrderTable(Order.objects.all(), order_by="-order_date")
    RequestConfig(request, paginate={"per_page": 10}).configure(table)
    return render(request, 'orders_app/index.html', {'table': table})

当使用django-tables2 2时，如何手动指定列的宽度和行的高度？

Answer 1

您必须选择宽度和高度作为列的限制因素。假设不能指定内容长度，则可以选择截断所显示的内容。

如Set the table column width constant regardless of the amount of text in its cells?和Using CSS to create table cells of a specific width with no word wrapping所示，在不修改表布局和宽度设置的情况下，很难或不可能直接设置表列宽度；或者，您可以将所有内容包装在div中，然后将格式应用于这些div。

为了在tables2中实现这一点，我重写了table.Column：

class DivWrappedColumn(tables.Column):

    def __init__(self, classname=None, *args, **kwargs):
        self.classname=classname
        super(DivWrappedColumn, self).__init__(*args, **kwargs)

    def render(self, value):
        return mark_safe("<div class='" + self.classname + "' >" +value+"</div>")

在表中创建列：

    custom_column = DivWrappedColumn(classname='custom_column')

然后应用css：

div.custom_column {
  white-space: normal;
  width: 200px;
  height: 45px;
}

这将导致一个固定宽度、固定高度的单元格，直到没有更多行，然后截断为止。

或者，使用“空格: nowrap"，省略高度；然后单元格就会被截断(但是用户可以滚动)。

Answer 2

# assume columns c1 and c2 that should be only as wide as needed
#   to fit their content
# and a column c3 which takes up the rest of the table width 

class MyTable(tables.Table):

    def __init__(self, *args, **kwargs):
        self.columns['c1'].column.attrs = {"td":{"style" : "width:1%;" }}
        self.columns['c2'].column.attrs = {"td":{"style" : "width:1%;" }}