Divider() doesn't work with horizontalScroll() in Jetpack Compose

Question

I'm trying to present a soccer table in Jetpack Compose UI. The user should be able to scroll the table both horizontally (through columns) and vertically (through rows). However, Divider() doesn't work with horizontalScroll() in Jetpack Compose and hence, the dividing line is missing in between items. If I remove horizontalScroll() from Card, it's working perfectly. How can I improve this?

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color(0, 0, 0, 255))
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .horizontalScroll(rememberScrollState()),
        backgroundColor = Color.White,
        shape = RoundedCornerShape(topStart = 12.dp, bottomStart = 12.dp)
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .padding(16.dp),
        ) {
            itemsIndexed(teams) { i, team ->
                Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(6.dp),
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Text(
                        text = team.name,
                        fontSize = 18.sp,
                        color = Color.Black,
                        fontWeight = FontWeight.SemiBold,
                        modifier = Modifier.width(150.dp)
                    )
                    Spacer(modifier = Modifier.width(12.dp))
                    Text(
                        text = team.gamesWon.toString(),
                        fontSize = 18.sp,
                        color = Color.Black,
                        fontWeight = FontWeight.SemiBold,
                        modifier = Modifier.width(30.dp),
                        textAlign = TextAlign.Center
                    )
                    Spacer(modifier = Modifier.width(12.dp))
                    Text(
                        text = team.gamesLost.toString(),
                        fontSize = 18.sp,
                        color = Color.Black,
                        fontWeight = FontWeight.SemiBold,
                        modifier = Modifier.width(30.dp),
                        textAlign = TextAlign.Center
                    )
                    Spacer(modifier = Modifier.width(12.dp))
                    Text(
                        text = team.stadiumName,
                        fontSize = 18.sp,
                        color = Color.Black,
                        fontWeight = FontWeight.SemiBold,
                        modifier = Modifier.width(300.dp),
                        maxLines = 1,
                        textAlign = TextAlign.Center
                    )
                }
                Divider()
            }
        }
    }
}

Answer 1

Since you are setting exact widths of all the things, you could just add up all the sizes and set the Divider width to match.