在榆树的桌子上使用colspan

Question

我有以下(简化)代码,我希望标题的每个单元格跨越第二行(正文)的两个单元格,但它们不是(有对齐的).

> 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