在 Elm 的 table 中使用 colspan

Question

我有以下（简化的）代码，我希望 header 的每个单元格跨越第二行的两个单元格 (body)，但它们不是（有对齐）。

> import Html exposing (..) 
> import Html.Attributes exposing (..) 
> import Array exposing (..)
> 
> main =
>     Html.program
>         { init = init
>         , view = view
>         , update = update
>         , subscriptions = subscriptions
>         }
> 
> type alias Model =
>     { test : Int
>     }
> 
> 
> init : ( Model, Cmd Msg ) 
> init =
>         ( Model 1
>         , Cmd.none
>         )
> 
> type Msg
>     = Test
> 
> update : Msg -> Model -> ( Model, Cmd Msg ) 
> update msg model =
>             ( model, Cmd.none )
> 
> subscriptions : Model -> Sub Msg 
> subscriptions model =
>     Sub.none
> 
> view : Model -> Html Msg 
> view model =
>     div [] [table]
>          cellHead : String-> Html Msg cellHead s =
>     td [style [("colspan", "2"), ("border", "2px solid blue")]] [s |> text]
> 
> cellBody : String-> Html Msg 
> cellBody s =
>     td [style [("border", "2px solid red")]] [s |> text]
> 
> table : Html Msg 
> table =
>     Html.table
>         [ style [ ( "border", "1px solid black" ) ] ]
>         [ caption
>             []
>             []
>         , thead
>             []
>              ([tr [] (Array.initialize 4 (toString >> cellHead) |>     toList)])
>         , tbody
>             []
>              ([tr [] (Array.initialize 8 (toString >> cellBody) |> toList)])
>         ]

我做错了什么？

Answer 1

您将 colspan 设置为 CSS 样式属性，但 colspan 是 HTML 属性，而不是 CSS 属性.

cellHead : String-> Html Msg 
cellHead s =
    td [style [("colspan", "2"), ("border", "2px solid blue")]] [s |> text]

应该是

cellHead : String-> Html Msg 
cellHead s =
    td [ colspan 2, style [("border", "2px solid blue")]] [s |> text]

这里，colspan是来自模块Html.Attributes

的函数

如果已修复（并格式化），您的完整代码如下：

https://ellie-app.com/c2cjHDjLva1/0

在 Elm 的 table 中使用 colspan

Using colspan in a table with Elm

html-table

elm