使表格列宽相同

Question

我正在尝试使用 ipywidgets 制作类似表格的东西。

是否可以使列宽相同？

也许还有更好的方法来创建表？

这里是重现的完整代码：

table_style = {'description_width': '150px'}
table_layout = {'width': '300px'}

table_header_1_widget = Text(
                            value='header 1',
                            placeholder='',
                            description='',
                            disabled=True,
                            layout=table_layout,
                            style=table_style
                            )
table_header_2_widget = Text(
                            value='header 2',
                            placeholder='',
                            description='',
                            disabled=True,
                            layout=table_layout,
                            style=table_style
                            )
table_header_3_widget = Text(
                            value='header 3',
                            placeholder='',
                            description='',
                            disabled=True,
                            layout=table_layout,
                            style=table_style
                            )

row_1_1_widget = BoundedFloatText(
                                        value=70.0,
                                        min=30.0,
                                        max=300.0,
                                        step=1.0,
                                        description='row 1:',
                                        layout=table_layout,
                                        style=table_style,
                                     )
row_1_2_widget = BoundedFloatText(
                                        value=80.0,
                                        min=30.0,
                                        max=300.0,
                                        step=1.0,
                                        description='',
                                        layout=table_layout,
                                        style=table_style
                                     )
row_1_3_widget = BoundedFloatText(
                                        value=90.0,
                                        min=30.0,
                                        max=300.0,
                                        step=1.0,
                                        description='',
                                        layout=table_layout,
                                        style=table_style
                                     )
row_2_1_widget = BoundedFloatText(
                                    value=20.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='row 2:',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_2_widget = BoundedFloatText(
                                    value=30.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_3_widget = BoundedFloatText(
                                    value=40.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )

hbox1 = HBox([table_header_1_widget, table_header_2_widget, table_header_3_widget])
hbox2 = HBox([row_1_1_widget, row_1_2_widget, row_1_3_widget])
hbox3 = HBox([row_2_1_widget, row_2_2_widget, row_2_3_widget])
ui = VBox([hbox1, hbox2, hbox3])

def func(p1,p2,p3,p4,p5,p6):
    print(p1,p2,p3,p4,p5,p6)

w = interactive_output(func,
                       { 
                         "p1":row_1_1_widget,
                         "p2":row_1_2_widget,
                         "p3":row_1_3_widget,
                         "p4":row_2_1_widget,
                         "p5":row_2_2_widget,
                         "p6":row_2_3_widget,
                       })

display(ui, w)

Answer 1

我修复了它，但可能以某种尴尬的方式：

table_style = {'description_width': 'initial'}
table_layout = {'width':'150px', 'min_width':'150px', 'height':'28px', 'min_height':'28px'}
row_layout = {'width':'200px', 'min_width':'200px'}

table_header_0_widget = Button(
    description='',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)

table_header_1_widget = Button( description='header 1',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               )
table_header_2_widget = Button( description='header 2',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               ) 
table_header_3_widget = Button( description='header 3',
                                disabled=True,
                                button_style='',
                                tooltip='',
                                icon='',
                                #layout=header_layout,
                                #style=table_style
                                layout=table_layout
                               )

row_1_0_widget = Button(
    description='row2 looooooooooooong:',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)
row_1_1_widget = BoundedFloatText(
                                    value=70.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    layout=table_layout,
                                    style=table_style,
                                 )
row_1_2_widget = BoundedFloatText(
                                    value=80.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_1_3_widget = BoundedFloatText(
                                    value=90.0,
                                    min=30.0,
                                    max=300.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_0_widget = Button(
    description='row3:',
    disabled=True,
    button_style='',
    tooltip='',
    icon='',
    layout=row_layout,
    style=table_style
)
row_2_1_widget = BoundedFloatText(
                                    value=20.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_2_widget = BoundedFloatText(
                                    value=30.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )
row_2_3_widget = BoundedFloatText(
                                    value=40.0,
                                    min=1.0,
                                    max=100.0,
                                    step=1.0,
                                    description='',
                                    layout=table_layout,
                                    style=table_style
                                 )

hbox1 = HBox([table_header_0_widget, table_header_1_widget, table_header_2_widget, table_header_3_widget])
hbox2 = HBox([row_1_0_widget, row_1_1_widget, row_1_2_widget, row_1_3_widget])
hbox3 = HBox([row_2_0_widget, row_2_1_widget, row_2_2_widget, row_2_3_widget])
ui = VBox([hbox1, hbox2, hbox3])

def func(p1,p2,p3,p4,p5,p6):
    print(p1,p2,p3,p4,p5,p6)

w = interactive_output(func,
                       { 
                         "p1":row_1_1_widget,
                         "p2":row_1_2_widget,
                         "p3":row_1_3_widget,
                         "p4":row_2_1_widget,
                         "p5":row_2_2_widget,
                         "p6":row_2_3_widget,
                       })

display(ui, w)