# Kibana canvas change column width

**URL:** <https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101>\
**Category:** Kibana\
**Tags:** canvas\
**Created:** [November 11, 2020, 4:58pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101 "2020-11-11T16:58:32Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Carlos\_Fernando\_Palm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carlos_fernando_palm/32/77804_2.png) [@Carlos\_Fernando\_Palm](https://discuss.elastic.co/u/Carlos_Fernando_Palm)\
**Post date:** [November 11, 2020, 4:58pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/1 "2020-11-11T16:58:33Z")

</div>

Hello there. I am trying to change the width of a column in kibana. The thing is that when I set column count to something other than 1 here :

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/a/2/a23cd8751be96bc4c32d59c98752249c32aba737.png)

I end up with something like this:

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/0/8/08532a8a8153ef0516dd288626de50268bec078d.png)  
Looks like in fact all we have is one column.

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/4/2/42dd56f66bccc6a7e22320b3380182b354abedbd.png)

How can I show the timestamp here in a more comfortable fashion (no multiline)?

---

<div class="post-metadata">

**Author:** ![Catherine\_Liu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/catherine_liu/32/34294_2.png) [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)\
**Post date:** [November 12, 2020, 3:11pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/2 "2020-11-12T15:11:07Z")

</div>

@Carlos_Fernando_Palm Using the default table element in Canvas as an example, I was able to set a fixed width for the first column using the following CSS.

 ![Screen Shot 2020-11-12 at 9.08.51 AM](https://us1.discourse-cdn.com/elastic/original/3X/3/1/3148ff191cfd844ee1443303c66a40c9a33f57ae.png)

Expression:

```auto
filters
| demodata
| table
| render 
  css=".canvasDataTable__table {
  table-layout: fixed;
  width:100%
}

.canvasDataTable__table th:first-child {
  width: 185px; 
}"

```

---

<div class="post-metadata">

**Author:** ![Carlos\_Fernando\_Palm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carlos_fernando_palm/32/77804_2.png) [@Carlos\_Fernando\_Palm](https://discuss.elastic.co/u/Carlos_Fernando_Palm)\
**Post date:** [November 13, 2020, 2:08pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/3 "2020-11-13T14:08:45Z")

</div>

Hello there, I used the following:

```auto
.canvasDataTable__td{
   text-align: left;
   nth-child(1) { width: 20% }
   nth-child(2) {width: 80%}
}

```

---

<div class="post-metadata">

**Author:** ![Catherine\_Liu](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/catherine_liu/32/34294_2.png) [@Catherine\_Liu](https://discuss.elastic.co/u/Catherine_Liu)\
**Post date:** [November 18, 2020, 5:00pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/4 "2020-11-18T17:00:04Z")

</div>

> [@Carlos\_Fernando\_Palm](#):
>
> ```auto
> .canvasDataTable__td{
> text-align: left;
> nth-child(1) { width: 20% }
> nth-child(2) {width: 80%}
> }
> 
> ```

That nested syntax doesn't seem to work. This worked for me:

```auto
.canvasDataTable__td{
   text-align: left;
}

.canvasDataTable__td:nth-child(1) { width: 20% }
.canvasDataTable__td:nth-child(2) { width: 80% }

```

---

<div class="post-metadata">

**Author:** ![Carlos\_Fernando\_Palm](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/carlos_fernando_palm/32/77804_2.png) [@Carlos\_Fernando\_Palm](https://discuss.elastic.co/u/Carlos_Fernando_Palm)\
**Post date:** [November 18, 2020, 6:12pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/5 "2020-11-18T18:12:03Z")

</div>

You're right, I'm using the following:

```auto
.canvasRenderEl{
   text-align:center;
   
}

.canvasDataTable__table {
  white-space: pre-wrap;
}

.canvasDataTable__td{
   text-align:left;
}
.canvasDataTable__td:nth-child(1) { width: 20% }
.canvasDataTable__td:nth-child(2) { width: 20% }

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 16, 2020, 6:12pm UTC](https://discuss.elastic.co/t/kibana-canvas-change-column-width/255101/6 "2020-12-16T18:12:03Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.