Table with merged cells in header

Dash Python
1

Hello!
I’m trying to generate table wuth merged cells in header.
Something like this:
image

Here is my app.py;
# coding: utf8

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash()


def generate_table():
    return html.Table(
        # Header
        [
			html.Tr(
				[
					html.Td('1',style={'rowspan':'3'}),
					html.Td('2',style={'colspan':'5'})
				]
			),
			html.Tr(
				[
					html.Td('3',style={'rowspan':'2'}),
					html.Td('4',style={'colspan':'2'}),
					html.Td('5',style={'colspan':'2'})
				]
			),
			html.Tr(
				[
					html.Td('6'),
					html.Td('7'),
					html.Td('8')
				]
			)
		]
    )
	
app.layout = html.Div(
	[
		generate_table()
	]
)	
	
if __name__ == '__main__':
	app.run_server(host='0.0.0.0')

i get just table with out any merge:
image

1 Like
2

I found solution:

# coding: utf8

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go

app = dash.Dash()


def generate_table():
    return html.Table(
        # Header
        [
			html.Tr(
				[
					html.Td('1',rowSpan='3',style={'border-style':'solid','border-width':'1px'}),
					html.Td('2',colSpan='5',style={'border-style':'solid','border-width':'1px'})
				]
			),
			html.Tr(
				[
					html.Td('3',rowSpan='2',style={'border-style':'solid','border-width':'1px'}),
					html.Td('4',colSpan='2',style={'border-style':'solid','border-width':'1px'}),
					html.Td('5',colSpan='2',style={'border-style':'solid','border-width':'1px'})
				]
			),
			html.Tr(
				[
					html.Td('6',style={'border-style':'solid','border-width':'1px'}),
					html.Td('7',style={'border-style':'solid','border-width':'1px'}),
					html.Td('8',style={'border-style':'solid','border-width':'1px'})
				]
			)
		],
		style={'border-collapse':'collapse','border-spacing':'0'}
		
    )
	
app.layout = html.Div(
	[
		generate_table()
	]
)	
	
if __name__ == '__main__':
	app.run_server(host='0.0.0.0')
4 Likes