diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx
index 83bcc171a4873..b8b371f6e4e01 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/table.tsx
@@ -46,6 +46,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
   const [selection, setSelection] = useState<ComponentTemplateListItem[]>([]);
 
   const tableProps: EuiInMemoryTableProps<ComponentTemplateListItem> = {
+    tableLayout: 'auto',
     itemId: 'name',
     isSelectable: true,
     'data-test-subj': 'componentTemplatesTable',
@@ -154,9 +155,9 @@ export const ComponentTable: FunctionComponent<Props> = ({
           defaultMessage: 'Name',
         }),
         sortable: true,
-        width: '20%',
+        width: '45%',
         render: (name: string, item: ComponentTemplateListItem) => (
-          <>
+          <span>
             <EuiLink
               {...reactRouterNavigate(
                 history,
@@ -171,7 +172,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
             </EuiLink>
             {item.isManaged && (
               <>
-                &nbsp;
+                {' '}
                 <EuiBadge color="hollow" data-test-subj="isManagedBadge">
                   {i18n.translate('xpack.idxMgmt.componentTemplatesList.table.managedBadgeLabel', {
                     defaultMessage: 'Managed',
@@ -179,7 +180,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
                 </EuiBadge>
               </>
             )}
-          </>
+          </span>
         ),
       },
       {
@@ -211,6 +212,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
           defaultMessage: 'Mappings',
         }),
         truncateText: true,
+        align: 'center',
         sortable: true,
         render: (hasMappings: boolean) => (hasMappings ? <EuiIcon type="check" /> : null),
       },
@@ -220,6 +222,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
           defaultMessage: 'Settings',
         }),
         truncateText: true,
+        align: 'center',
         sortable: true,
         render: (hasSettings: boolean) => (hasSettings ? <EuiIcon type="check" /> : null),
       },
@@ -229,6 +232,7 @@ export const ComponentTable: FunctionComponent<Props> = ({
           defaultMessage: 'Aliases',
         }),
         truncateText: true,
+        align: 'center',
         sortable: true,
         render: (hasAliases: boolean) => (hasAliases ? <EuiIcon type="check" /> : null),
       },
diff --git a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
index 8a6ed8ac079a2..c441f02fc4062 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
@@ -48,11 +48,11 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
       name: i18n.translate('xpack.idxMgmt.templateList.table.nameColumnTitle', {
         defaultMessage: 'Name',
       }),
-      truncateText: true,
       sortable: true,
+      width: '30%',
       render: (name: TemplateListItem['name'], item: TemplateListItem) => {
         return (
-          <>
+          <span>
             <EuiLink
               {...reactRouterNavigate(history, getTemplateDetailsLink(name), () =>
                 uiMetricService.trackMetric(METRIC_TYPE.CLICK, UIM_TEMPLATE_SHOW_DETAILS_CLICK)
@@ -60,10 +60,9 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
               data-test-subj="templateDetailsLink"
             >
               {name}
-            </EuiLink>
-            &nbsp;
+            </EuiLink>{' '}
             <TemplateTypeIndicator templateType={item._kbnMeta.type} />
-          </>
+          </span>
         );
       },
     },
@@ -72,8 +71,8 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
       name: i18n.translate('xpack.idxMgmt.templateList.table.indexPatternsColumnTitle', {
         defaultMessage: 'Index patterns',
       }),
-      truncateText: true,
       sortable: true,
+      width: '20%',
       render: (indexPatterns: string[]) => <strong>{indexPatterns.join(', ')}</strong>,
     },
     {
@@ -83,12 +82,15 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
       }),
       truncateText: true,
       sortable: true,
+      width: '20%',
       render: (composedOf: string[] = []) => <span>{composedOf.join(', ')}</span>,
     },
     {
       name: i18n.translate('xpack.idxMgmt.templateList.table.dataStreamColumnTitle', {
         defaultMessage: 'Data stream',
       }),
+      width: '90px',
+      align: 'center',
       truncateText: true,
       render: (template: TemplateListItem) =>
         template._kbnMeta.hasDatastream ? <EuiIcon type="check" /> : null,