{"id":61,"date":"2019-08-06T10:52:06","date_gmt":"2019-08-06T10:52:06","guid":{"rendered":"http:\/\/ohhmysite.com\/dinodds\/one\/?page_id=61"},"modified":"2025-11-18T17:22:13","modified_gmt":"2025-11-18T17:22:13","slug":"table-width-narrow","status":"publish","type":"page","link":"https:\/\/demos.dinomatic.com\/luanda\/table-width-narrow\/","title":{"rendered":"Table Width: Narrow"},"content":{"rendered":"\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-columns has-2-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\"><div class=\"df-odds \"\n\t\t\tdata-layout=\"top\"\n\t\t\tdata-style=\"1\"\n\t\t\tdata-league=\"nfl\"\n\t\t\tdata-away=\"\"\n\t\t\tdata-home=\"\"\n\t\t\tdata-type=\"spread\"\n\t\t\tdata-bookies=\"mybookie,xbet,sportsbetting,betnow,everygame,busr,betus,betonline,bovada,apuestahoy\"\n\t\t\t>\n<div class=\"df-header\">\n\n    \n    <div id=\"df-settings\" class=\"df-settings df-settings--wrapper\" role=\"group\">\n        <span class=\"df-settings__selected\" role=\"button\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\">\n\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-sliders-horizontal-icon lucide-sliders-horizontal\"><path d=\"M10 5H3\"\/><path d=\"M12 19H3\"\/><path d=\"M14 3v4\"\/><path d=\"M16 17v4\"\/><path d=\"M21 12h-9\"\/><path d=\"M21 19h-5\"\/><path d=\"M21 5h-7\"\/><path d=\"M8 10v4\"\/><path d=\"M8 12H3\"\/><\/svg>\n            <span>\n                Spread            <\/span>\n        <\/span>\n\n        <div class=\"df-settings__options df-hidden\" aria-hidden=\"true\"\n            aria-label=\"Change the odds display type\">\n\n            <span class=\"df-settings__option\" data-type=\"moneyline\" role=\"button\" tabindex=\"0\">\n                Moneyline            <\/span>\n\n            <span class=\"df-settings__option\" data-type=\"spread\" role=\"button\" tabindex=\"0\">\n                Spread            <\/span>\n\n            <span class=\"df-settings__option\" data-type=\"total\" role=\"button\" tabindex=\"0\">\n                Total            <\/span>\n        <\/div>\n    <\/div>\n\n    <div class=\"df-match__odds-wrapper\">\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"mybookie\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/webpartners\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/mybookie.ag_.png\"\n                    alt=\"mybookie\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"xbet\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/webpartners\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/xbet.ag_.png\"\n                    alt=\"xbet\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"sportsbetting\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/ckings\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/sportsbetting.ag_.png\"\n                    alt=\"sportsbetting\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"betnow\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/winningcommissions\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/betnow.eu_.png\"\n                    alt=\"betnow\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"everygame\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/everygame\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/everygame.eu_.png\"\n                    alt=\"everygame\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"busr\">\n\n            <a href=\"https:\/\/dinomatic.com\/refer\/webpartners\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/busr.ag_.png\"\n                    alt=\"busr\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"betus\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/betus\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/betus.com_.pa_.png\"\n                    alt=\"betus\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"betonline\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/ckings\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/betonline.ag_.png\"\n                    alt=\"betonline\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"bovada\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/bovada\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2024\/03\/bovada.lv_.png\"\n                    alt=\"bovada\" \/>\n            <\/a>\n        <\/div>\n                        \n        <div class=\"df-bookie df-hidden\"\n            data-bookie=\"apuestahoy\">\n\n            <a href=\"https:\/\/demos.dinomatic.com\/luanda\/visit\/winningcommissions\"\n                target=\"_blank\"\n                rel=\"nofollow noopener\">\n\n                <img decoding=\"async\" src=\"https:\/\/demos.dinomatic.com\/luanda\/wp-content\/uploads\/2026\/03\/apuestahoy.com_.png\"\n                    alt=\"apuestahoy\" \/>\n            <\/a>\n        <\/div>\n            <\/div>\n<\/div>\n\n<span class=\"df-arrow df-arrow__left df-hidden\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\">\n        <path d=\"M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm8-10a8 8 0 1 0-16 0 8 8 0 0 0 16 0zM7.46 9.3L11 5.75l1.41 1.41L9.6 10l2.82 2.83L11 14.24 6.76 10l.7-.7z\"\/>\n    <\/svg>\n<\/span>\n\n<span class=\"df-arrow df-arrow__right df-hidden\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 20 20\">\n        <path d=\"M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20zM2 10a8 8 0 1 0 16 0 8 8 0 0 0-16 0zm10.54.7L9 14.25l-1.41-1.41L10.4 10 7.6 7.17 9 5.76 13.24 10l-.7.7z\"\/>\n    <\/svg>\n<\/span>\n\n<div class=\"df-matches\">\n    <svg width=\"120\" height=\"30\" viewBox=\"0 0 120 30\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n        fill=\"var(--color-highlight)\" style=\"width: 200px; height: 200px; display: block; margin: 0rem auto; padding: 2rem 0;\">\n        <circle cx=\"15\" cy=\"15\" r=\"15\">\n            <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\"15;9;15\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n            <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\"1;.5;1\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n        <\/circle>\n        <circle cx=\"60\" cy=\"15\" r=\"9\" fill-opacity=\"0.3\">\n            <animate attributeName=\"r\" from=\"9\" to=\"9\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\"9;15;9\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n            <animate attributeName=\"fill-opacity\" from=\"0.5\" to=\"0.5\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\".5;1;.5\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n        <\/circle>\n        <circle cx=\"105\" cy=\"15\" r=\"15\">\n            <animate attributeName=\"r\" from=\"15\" to=\"15\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\"15;9;15\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n            <animate attributeName=\"fill-opacity\" from=\"1\" to=\"1\"\n                    begin=\"0s\" dur=\"0.8s\"\n                    values=\"1;.5;1\" calcMode=\"linear\"\n                    repeatCount=\"indefinite\" \/>\n        <\/circle>\n    <\/svg>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">You can use the odds tables in pages with different widths. The table will take 100% width of it&#8217;s parent\/container element and if it&#8217;s wider than its container, horizontal scrolling will be enabled and left\/right arrows will be displayed.<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-color has-text-color wp-block-paragraph\">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit.<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-color has-text-color wp-block-paragraph\">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit.<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-color has-text-color wp-block-paragraph\">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit.<\/p>\n\n\n\n<p class=\"has-cyan-bluish-gray-color has-text-color wp-block-paragraph\">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can use the odds tables in pages with different widths. The table will take 100% width of it&#8217;s parent\/container element and if it&#8217;s wider than its container, horizontal scrolling will be enabled and left\/right arrows will be displayed. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur unde non veniam mollitia inventore adipisci libero dolorum velit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis est, sint ea facere maxime hic similique iste assumenda veritatis omnis. Pariatur&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":1,"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":484,"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/pages\/61\/revisions\/484"}],"wp:attachment":[{"href":"https:\/\/demos.dinomatic.com\/luanda\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}