使用elm-ui的table/indexedTable如何实现同行列等高且不固定高度？

你提出的需求可以直接使用elm-ui自带的table/indexedTable组件实现，不需要自行用row和column封装自定义表格。

解决方法 #

只需要给每列view函数返回的el元素添加height fill属性即可。
默认状态下el元素的高度默认贴合自身内容高度，所以同一行内不同内容高度的单元格会出现高度不一致的问题。添加height fill后，单元格会自动拉伸填满当前行的整体高度，而行的整体高度由该行内容最高的单元格自动决定，不需要手动设置固定高度，完全是自适应效果。

修改后的核心代码如下：

bgcolor idx =
    (if modBy 2 idx == 0 then
        gray

     else
        white
    )
        |> Background.color

view model =
    indexedTable []
        { data =
            [ { f1 = "f11", f2 = "f12" }
            , { f1 = "f21", f2 = "f22" }
            , { f1 = "f31", f2 = "f32" }
            , { f1 = "f41", f2 = "f42" }
            ]
        , columns =
            [ { header = text "f1"
              , width = fill
              , view = \idx d -> el [ Font.size 30, bgcolor idx, height fill ] <| text d.f1
              }
            , { header = text "f2"
              , width = fill
              , view = \idx d -> el [ Font.size 15, bgcolor idx, height fill ] <| text d.f2
              }
            ]
        }
        |> layout []

内容的提问来源于stack exchange，提问作者Francisco Dibar