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

在榆树的桌子上使用colspan

1 个答案: